vue.js - 使用外部组件时出现 VueJS 错误
问题描述
让我先说我是 VueJS 的新手,我希望我的问题的解决方案是微不足道的,但我一生都无法弄清楚或在网上找到它,所以我在这里:
我遵循Traversy Media 的 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>
我猜我没有以某种方式正确导入这些组件,所以我将不胜感激。
谢谢你。
解决方案
不幸的事实是,Vue v3 的“不是最近”版本带来了 Vue 2 的一些重大变化,需要进行一些迁移
可以肯定地说,为 Vue 2 创建的现有组件和组件库在 Vue 3 中没有任何修改就可以正常工作
链接到课程的repo显示您正在使用 Vue 3。但是vue-good-table或vue-bootstrap4-table都是 Vue 2 组件,还没有 Vue 3 的版本
所以你需要寻找不同的组件并寻找对 Vue 3 的明确支持......
推荐阅读
- android - 为什么 Kotlin 在从资源中设置 Glide 错误可绘制时提示创建扩展函数?
- oracle - Oracle SQL - 无法看到创建的表
- c# - 我在使用 Office365 的 oauth2 身份验证对用户进行身份验证时遇到问题
- html - 使用 XSLT 将带有名称和内容的元标记添加到我的 html 页面
- computer-vision - 图像转换:将直线转换为圆弧
- java - 读取spss文件java
- r - 使用 ggplot2 创建渐变色条
- reactjs - 从 redux-form 覆盖初始值
- laravel - 将图像存储在本地驱动器中并在数据库中保存路径
- pyqt5 - PyQt5 pyqtgraph(添加/删除)曲线在单个图中