Html BootstrapVue-属性或方法“;“数据”;没有定义。。。使用作用域插槽时
您好,我正在学习使用BootstrapVue,我从BootstrapVue的官方文档中复制了一个示例-Html BootstrapVue-属性或方法“;“数据”;没有定义。。。使用作用域插槽时,html,vue.js,vue-component,bootstrap-vue,Html,Vue.js,Vue Component,Bootstrap Vue,您好,我正在学习使用BootstrapVue,我从BootstrapVue的官方文档中复制了一个示例- <template> <div> <b-table :fields="fields" :items="items" foot-clone> <!-- A custom formatted data column cell --> <template v-slot:cell(name)="data">
<template>
<div>
<b-table :fields="fields" :items="items" foot-clone>
<!-- A custom formatted data column cell -->
<template v-slot:cell(name)="data">
{{ data.value.first }} {{ data.value.last }}
</template>
<!-- A custom formatted header cell for field 'name' -->
<template v-slot:head(name)="data">
<span class="text-info">{{ data.label.toUpperCase() }}</span>
</template>
<!-- A custom formatted footer cell for field 'name' -->
<template v-slot:foot(name)="data">
<span class="text-danger">{{ data.label }}</span>
</template>
<!-- Default fall-back custom formatted footer cell -->
<template v-slot:foot()="data">
<i>{{ data.label }}</i>
</template>
</b-table>
</div>
</template>
<script>
export default {
data() {
return {
fields: [
// A column that needs custom formatting
{ key: 'name', label: 'Full Name' },
// A regular column
'age',
// A regular column
'sex'
],
items: [
{ name: { first: 'John', last: 'Doe' }, sex: 'Male', age: 42 },
{ name: { first: 'Jane', last: 'Doe' }, sex: 'Female', age: 36 },
{ name: { first: 'Rubin', last: 'Kincade' }, sex: 'Male', age: 73 },
{ name: { first: 'Shirley', last: 'Partridge' }, sex: 'Female', age: 62 }
]
}
}
}
</script>
{{data.value.first}{{data.value.last}}
{{data.label.toUpperCase()}}
{{data.label}
{{data.label}
导出默认值{
数据(){
返回{
字段:[
//需要自定义格式的列
{键:'name',标签:'Full name'},
//正规纵队
“年龄”,
//正规纵队
“性”
],
项目:[
{姓名:{第一个:'约翰',最后一个:'多伊'},性别:'男性',年龄:42},
{姓名:{第一个:'简',最后一个:'多伊'},性别:'女',年龄:36},
{姓名:{第一个:'鲁宾',最后一个:'金凯德'},性别:'男性',年龄:73},
{姓名:{第一个:'雪莉',最后一个:'鹧鸪'},性别:'女性',年龄:62}
]
}
}
}
在教程页面上,一切似乎都很好,但当我运行此程序时,我不断得到以下信息:属性或方法“数据”未定义…
我相信这是因为
部分没有实例化数据,但我不知道为什么以及如何修复它,请帮助。是的,版本是问题所在。在我将Vue 2.5.x更新到2.6.10之后,我使用了它。它与教程中的一样,没有任何问题。您正在运行什么版本的Vue和BootstrapVue?它似乎与我配合得很好,您使用的是哪个版本?您可以在导入引导vue的地方共享您的入口点代码吗?您需要vue 2.6.x才能使用v-slot,而且引导vue也需要它,因此请确保您已经安装了vue 2.5.x。是的,我有vue 2.5.x,这就是问题所在,请提供帮助。