使用外部组件时出现 VueJS 错误

Posted

技术标签:

【中文标题】使用外部组件时出现 VueJS 错误【英文标题】:VueJS errors when using external components 【发布时间】:2021-09-25 05:21:08 【问题描述】:

让我先说我是 VueJS 的新手,我希望我的问题的解决方案是微不足道的,但我一生都无法弄清楚或在网上找到它,所以我在这里:

我关注了Traversy Media's crash course on VueJS,并与他一起构建了任务跟踪器应用程序,一切都运行良好。但是在课程结束后,我决定在“关于”页面中使用数据表,特别是使用具有列过滤的表。出现了两个候选者:VueGoodTable 和 VueBootstrap4Table。

我知道 VueGoodTable 可以工作,因为我之前已经在 Laravel 中使用过它,但并没有真正理解它是如何工作的,但是当我尝试在这里导入它时,我一直收到这个错误:

代码:

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <vue-good-table
      :columns="columns"
      :rows="rows"/>
  </div>
</template>

<script>
import 'vue-good-table/dist/vue-good-table.css'
import  VueGoodTable  from 'vue-good-table';

export default 
  components: 
    VueGoodTable,
  ,
  data()
    return 
      columns: [
        
          label: 'Name',
          field: 'name',
        ,
        
          label: 'Age',
          field: 'age',
          type: 'number',
        ,
        
          label: 'Created On',
          field: 'createdAt',
          type: 'date',
          dateInputFormat: 'yyyy-MM-dd',
          dateOutputFormat: 'MMM do yy',
        ,
        
          label: 'Percent',
          field: 'score',
          type: 'percentage',
        ,
      ],
      rows: [
         id:1, name:"John", age: 20, createdAt: '',score: 0.03343 ,
         id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 ,
         id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 ,
         id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 ,
         id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 ,
         id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 ,
      ],
    ;
  ,

</script>

此代码实际上是从 VueGoodTable 文档的“入门”页面复制粘贴的。

当我尝试使用 VueBootstrap4Table 时,也会发生不同的错误:

代码:

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <vue-bootstrap4-table :rows="rows" :columns="columns" :config="config">
    </vue-bootstrap4-table>
  </div>
</template>

<script>
import VueBootstrap4Table from 'vue-bootstrap4-table'

export default 
  data: function() 
        return 
            rows: [
                    "id": 1,
                    "name": 
                        "first_name": "Vladimir",
                        "last_name": "Nitzsche"
                    ,
                    "address": 
                        "country": "Mayotte"
                    ,
                    "email": "franecki.anastasia@gmail.com",
                ,
                
                    "id": 2,
                    "name": 
                        "first_name": "Irwin",
                        "last_name": "Bayer"
                    ,
                    "age": 23,
                    "address": 
                        "country": "Guernsey"
                    ,
                    "email": "rlittle@macejkovic.biz",
                ,
                
                    "id": 3,
                    "name": 
                        "first_name": "Don",
                        "last_name": "Herman"
                    ,
                    "address": 
                        "country": "Papua New Guinea"
                    ,
                    "email": "delia.becker@cormier.com",
                ],
            columns: [
                    label: "id",
                    name: "id",
                    filter: 
                        type: "simple",
                        placeholder: "id"
                    ,
                    sort: true,
                ,
                
                    label: "First Name",
                    name: "name.first_name",
                    filter: 
                        type: "simple",
                        placeholder: "Enter first name"
                    ,
                    sort: true,
                ,
                
                    label: "Email",
                    name: "email",
                    sort: true,
                ,
                
                    label: "Country",
                    name: "address.country",
                    filter: 
                        type: "simple",
                        placeholder: "Enter country"
                    ,
                ],
            config: 
                checkbox_rows: true,
                rows_selectable: true,
                card_title: "Vue Bootsrap 4 advanced table"
            
        
    ,
    components: 
        VueBootstrap4Table
    

</script>

我猜我没有以某种方式正确地导入这些组件,所以我将不胜感激。

谢谢。

【问题讨论】:

速成课程是否包括安装这些软件包?通常使用“npm install”来完成。你是这样做的吗? 是的,我在尝试任何这些之前做了“npm install --save vue-good-table”、“npm i bootstrap@4”和“npm i vue-bootstrap4-table --save” . 【参考方案1】:

不幸的事实是,Vue v3 的“不是最近”版本带来了 Vue 2 的一些重大变化,这需要一些 migration

可以肯定地说,为 Vue 2 创建的现有组件和组件库在 Vue 3 中没有任何修改就可以正常工作

链接到课程的 repo 表明您正在使用 Vue 3。但是 vue-good-table 或 vue-bootstrap4-table 都是 Vue 2 组件,还没有适用于 Vue 3 的版本

所以你需要寻找不同的组件并寻找对 Vue 3 的明确支持...

【讨论】:

我刚刚尝试使用 Vue 2,它们工作正常,谢谢。我应该只在不久的将来使用 Vue 2 吗? Vue 3 很棒,您只需要在选择 3rd 方组件时小心...

以上是关于使用外部组件时出现 VueJS 错误的主要内容,如果未能解决你的问题,请参考以下文章

使用 Vue Js 运行 Jest 测试时出现“语法错误:无法在模块外使用 import 语句”

使用 axios.put [laravel + vuejs 3] 更新模式内的数据时出现错误 422

vueJs引入elementUI组件,运行时出现ERROR

IBM Worklight 5.0.6 - 无法添加外部 Dojo 组件(需要 Dojo Dgrid 时出现脚本错误)

在 .vue 组件中编译方法时出现语法错误

安装 VueJS 时出现“无法读取未定义的属性 'mergeConfig'”错误