arrays - 复选框组的 vuejs 模型

Question

我有 2 个数组，一个用于可能的复选框变体，另一个用于已保存的复选框。例如 VUEJS 模板

<ul>
                <li v-for="cit in possable">
                    <label>
                    <input  
                        type="checkbox"
                        :checked="savedcbx.indexOf(+cit.id)>-1"
                        :value="cit.id"/>
                    {{cit.rname}}
                    </label>
                </li>
            </ul>

我的问题是如何将新的复选框添加到保存的数组或从保存的数组中删除 uncheckedbox&

Answer 1

您只需要一个数组即可实现切换。来自 Arrays section of Vue.js docs:

HTML:

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>

Vue 应用程序:

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})