绑定到 b 表字段的变量

Question

最近我遇到了 bootstrap-vue 表及其项目的问题。 我用物品对象制作了一张桌子。我还有几个变量，我想成为表格项目的一部分。我想在这个项目插槽的表格模板中使用变量作为复选框输入的 v-model。

我试图把一个变量作为一个项目。该变量被表格看到，但没有绑定到它，因此复选框的任何更改都不会反映在变量值中。

我期望工作的代码。 带有模板和复选框输入的表格，带有 v-model 到组件数据变量：

<b-table class="settings-integrationsTable" outlined :items="integrationsTableItems()" :fields="print_integrations_fields">
   <template v-slot:cell(switch)="data">
      <b-form-checkbox type="checkbox" 
       v-model="data.item.model">
      </b-form-checkbox>
   </template>
</b-table>

data () {
   return {
      variable: false
   }
}
methods: {
   integrationsTableItems () {
      return {
         { model: this.variable },
      }
   }
}

我很想将变量直接放在上面看到的项目中，并使用它并将其绑定到我的表输入的 v-model 中。

我对这种情况的解决方法是，我的项目模型字段不是直接变量，而是它的字符串名称，例如。 '变量'，我做了一个方法来返回它的值。我用这个值来表示复选框的选中状态，第二种方法改变它的状态。

<template v-slot:cell(switch)="data">
   <b-form-checkbox type="checkbox" 
   :checked="getIntegrationModel(data.item.model)"
   @change="changeIntegrationModel(data.item.model)">
   </b-form-checkbox>
</template>

我的第一个想法有什么可行的方法吗？我可能做错了什么。

Answer 1

两个问题：

methods: {
   integrationsTableItems () {
      return {
         { model: this.variable },
      }
   }
}

应该是：

methods: {
   integrationsTableItems () {
      // b-table expects an array of items, not an object
      return [
         { model: this.variable },
      ]
   }
}

第二个问题是您将this.variable 的值 传递到您的项目中，而不是绑定到您的组件数据的反应式getter/setter。更新项目的model 字段只会更新它在项目对象中的值，而不是数据中的值。

如果数据中只有一个变量，则执行以下操作：

<b-table class="settings-integrationsTable" outlined :items="integrationsTableItems()" :fields="print_integrations_fields">
   <template v-slot:cell(switch)="data">
      <!-- "model" will point to this.model (your data) -->
      <b-form-checkbox type="checkbox" v-model="model">
      </b-form-checkbox>
   </template>
</b-table>

更新（2019-10-10）：

在您的项目数据中放置一个 getter/setter（用于项目属性 model）：

   integrationsTableItems () {
      return [
         {
           model: {
             get() => {
               return this.variable
             },
             set(val) => {
               this.variable = val
             }
           }
         },
      ]
   }