BootstrapVue - 未定义属性或方法“数据”......使用范围插槽时

Posted 2023-02-23

【中文标题】BootstrapVue - 未定义属性或方法“数据”......使用范围插槽时

【英文标题】：BootstrapVue - Property or method "data" is not defined... when using scoped slots

【发布时间】：2020-03-05 20:54:33

【问题描述】：

您好，我正在学习使用 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"> 部件以某种方式没有实例化数据，但我不知道为什么以及如何修复它，请帮助。

【问题讨论】：

你运行的是什么版本的 Vue 和 BootstrapVue？

它似乎对我很好，你使用的是哪个版本？你能分享你导入 Bootstrap-vue 的入口点代码吗？

你需要 Vue 2.6.x 才能使用 v-slot，Bootstrap-Vue 也需要它，所以确保你已经安装了它

是的，我有 Vue 2.5.x，这就是问题所在，求帮助。

【参考方案1】：

是的，版本是问题所在。我在将 Vue 2.5.x 更新到 2.6.10 后使用它，它可以正常工作，就像在教程中一样。