BootstrapVue - 未定义属性或方法"data"...使用作用域槽时

Question

你好，我正在学习使用BootstrapVue，我从BootstrapVue的官方文档中复制了一个例子-

<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>

在教程页面上，一切似乎都很好，但当我运行这个时，我一直得到这个：Property or method "data" is not defined...我相信这是因为<template v-slot:cell(name)="data">部分不知何故没有实例化数据，但我不知道为什么以及如何修复它，请帮助。

Answer 1

是的，版本是问题所在。在我将Vue 2.5.x更新到2.6.10之后，我使用了它，它和教程中一样没有任何问题。