复选框组的 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

您只需要一个数组即可实现切换。来自Vue.js 文档的数组部分：

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: []
  }
})

Answer 2

我只是将 savecbx 放入模型中，它的工作原理与上面的答案类似。Vue 很棒的东西。

             <ul>
            <li v-for="cit in possable">
                <label>
                <input  
                    type="checkbox"
                    v-model="savedcbx"

                    //with model this not need too 
                    :checked="savedcbx.indexOf(+cit.id)>-1"
                    :value="cit.id"/>
                {{cit.rname}}
                </label>
            </li>
        </ul>