使用外部组件时的 VueJS 错误

Question

首先让我说我是 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>

此代码字面意思是 copy-pasted 来自 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>

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

谢谢。

Answer 1

不幸的是，“不是最近”发布的 Vue v3 带来了 Vue 2 的一些重大变化，这需要一些 migration

可以肯定地说，为 Vue 2 创建的现有组件和组件库中很少有不经任何修改就可以在 Vue 3 中工作的

repo linked to the course shows that you are using Vue 3. But Both the vue-good-table or vue-bootstrap4-table 是 Vue 2 组件，尚无 Vue 3 版本

因此您需要寻找不同的组件并寻找对 Vue 3 的明确支持...

使用外部组件时的 VueJS 错误

VueJS errors when using external components

components

vue.js

vue-component

vue-good-table