引导vue 2b表插槽停止工作

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>

控制台打印的错误：

属性或方法“行”不是在实例上定义的，而是在呈现期间引用的。通过初始化此属性，确保此属性是反应性的，无论是在data选项中，还是对于基于类的组件。

和

呈现中的

错误："TypeError:无法读取未定义的属性‘项’“

知道会发生什么事吗？

Answer 1

正如关于这个问题的评论中所证实的那样，问题与正在使用的Vue版本有关。

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

更新到2.6.0或更高版本将修复此问题。

Answer 2

我认为这样做，您可以将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>

​