Question

最近，我遇到了bootstrap-vue表及其项目的问题。我用物品对象做了一张桌子。我也有几个变量，我想成为表项的一部分。我想将此变量用作表模板中此项目位的复选框输入的v模型。

我试图将变量作为项目。该变量在表中可见，但未绑定到该表，因此复选框的任何更改都不会反映在变量值中。

我期望的代码。带有模板和复选框的表通过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模型中。

我针对这种情况的解决方法是，我的项目模型字段不是直接变量，而是它的字符串名称，例如。 “变量”，我提出了一种返回其值的方法。我使用该值表示复选框的选中状态，第二种方法更改其状态。

<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的 value 传递到项目中，而不是绑定到组件数据的反应性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）：

要在项目数据中放置吸气剂/设置剂（针对项目属性model）：

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

变量绑定到b表的字段

1 个答案:

更新（2019-10-10）：