vue.js - 使用 v-for 将 Vue 复选框组绑定到嵌套对象

Question

我在 Vue 中有一个嵌套数据集，我想绑定到几个复选框组。代码如下（这里是jsfiddle）：

<div id="app">
  <b-form-checkbox-group 
    v-model="checked"
    v-for="(opts, key) in optGroups"
    :key="key"
    v-model="checked[key]"
  >
    <button @click="checkAll(key)">Check All</button>
    <b-form-checkbox 
      v-for="opt in opts"
      :key="opt.value"
      :value="opt.value"
    >{{ opt.text }}</b-form-checkbox>
  </b-form-checkbox-group>
</div>

new Vue({
  el: '#app',
  data: {
    optGroups: {
        g1: [
        { value: 'val1', text: 'value 1' },
        { value: 'val2', text: 'value 2' },
        { value: 'val3', text: 'value 3' }
      ],
      g2: [
        { value: 'val4', text: 'value 4' },
        { value: 'val5', text: 'value 5' },
        { value: 'val6', text: 'value 6' }
      ]
    },
    checked: {
        g1: ['val1'],
      g2: []
    }
  },
  methods: {
    checkAll(groupKey) {
        this.checked[groupKey] = this.optGroups[groupKey].map(
        opt => opt.value
      );
    }
  }
})

我希望复选框尊重checked对象中设置的值。在启动时。我希望 easchCheck All按钮检查其组中的所有框。

标签： vue.js

Answer 1

删除 -this 中的第二个v-model指令。b-form-checkbox-groupv-model="checked"

更新小提琴 - https://jsfiddle.net/0k9u4oLa/26/