Question

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

<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对象中设置的值。在启动时。我想按Check All按钮来检查其组中的所有复选框。

Answer 1

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

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

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

1 个答案: