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

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

原文由 Sultan Zhumatayev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我只是将 savedcbx 放入模型中，它的工作方式与上面的答案一样。 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>

原文由 Sultan Zhumatayev 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您只需要一个数组即可实现切换。来自 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>

视图应用程序：

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

原文由 lauri108 发布，翻译遵循 CC BY-SA 4.0 许可协议