Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/71.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html BootstrapVue-属性或方法“;“数据”;没有定义。。。使用作用域插槽时_Html_Vue.js_Vue Component_Bootstrap Vue - Fatal编程技术网

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

您好,我正在学习使用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>

{{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,这就是问题所在,请提供帮助。