bootstrap-vue 2 b-table 插槽停止工作

Question

我正在使用 b-table 组件，我有 3 列我想使用插槽自定义。

以下代码过去对我有用，但最近它停止工作，尽管关于代码、组件、包版本没有任何变化。

<b-table
            class="tableWidth"
            sticky-header
            striped
            hover
            :items="tableData"
            :fields="tableColumns"
        >
            <template v-slot:cell(certificationType)="row">
                <b-form-group :style="{ width: '80%' }">
                    <b-form-select
                        plain
                        v-model="row.item.certificationType"
                        :options="certificationTypes"
                    ></b-form-select>
                </b-form-group>
            </template>
            <template v-slot:cell(studentRank)="row">
                <b-form-group :style="{ width: '80%' }">
                    <b-form-select plain v-model="row.item.studentRank" :options="Ranks"></b-form-select>
                </b-form-group>
            </template>
            <template v-slot:cell(selected)="row">
                <b-form-checkbox
                    v-model="row.item.selected"
                    name="checkbox-1"
                    :value="true"
                    :unchecked-value="false"
                />
            </template>
        </b-table>

控制台打印的错误：

Property or method "row" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

和

Error in render: "TypeError: Cannot read property 'item' of undefined"

知道会发生什么吗？

Answer 1

我是这样认为的，您可以将您的 b-table 项目建模为您的 b-form-select 或任何其他输入。正如您在代码片段中看到的，您可以更改 select 选项并看到 tableData 会发生变化。

new Vue({
  el: "#app",
  data() {
    return {
      tableColumns: ['first_name_value', 'last_name', ],
      tableData: [{
          isActive: false,
          first_name_value: 'O2',
          last_name: 'Wilson'
        },
        {
          isActive: true,
          first_name_value: 'O1',
          last_name: 'Carney'
        }
      ],
      certificationTypes: [{
          text: "option 1",
          value: "O1"
        },
        {
          text: "option 2",
          value: "O2"
        }
      ]
    }
  },
});

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
  {{tableData}}
  <b-table class="tableWidth" sticky-header striped hover :items="tableData" :fields="tableColumns">
    <template v-slot:cell(first_name_value)="{ item }">
                <b-form-group :style="{ width: '80%' }">
                    <b-form-select
                        plain
                        v-model="item.first_name_value"
                        :options="certificationTypes"
                    ></b-form-select>
                </b-form-group>
            </template>
    <template v-slot:cell(studentRank)="row">
                <b-form-group :style="{ width: '80%' }">
                    <b-form-select plain v-model="row.item.studentRank" :options="Ranks"></b-form-select>
                </b-form-group>
            </template>
    <template v-slot:cell(selected)="row">
                <b-form-checkbox
                    v-model="row.item.selected"
                    name="checkbox-1"
                    :value="true"
                    :unchecked-value="false"
                />
            </template>
  </b-table>
</div>

Answer 2

正如问题评论中所确认的那样，问题与所使用的 Vue 版本有关。

v-slot 语法是在 Vue 的 2.6.0 版本中引入的，这意味着如果您使用的是较低版本，则会出现上述错误。因为它不知道 row 变量来自插槽，而是认为它应该在组件实例中可用。

更新到 2.6.0 或更高版本应该可以解决这个问题。

bootstrap-vue 2 b-table 插槽停止工作

bootstrap-vue 2 b-table slots stopped working

vue.js

vuejs2

bootstrap-vue