复选框组的vuejs模型答案

【问题标题】：vuejs model for checkbox group复选框组的vuejs模型
【发布时间】：2017-09-18 05:50:38
【问题描述】：

我有 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>

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

【问题讨论】：

标签： arrays vue.js checkboxlist

【解决方案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: []
  }
})

【讨论】：

【解决方案2】：

我只是将 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>

【讨论】：

这意味着您的问题不清楚。您询问了如何在savedcbx 中添加/删除元素，只要选中/取消选中复选框，savedcbx 就会更改。无论如何，是的，如果您想获得当前选中复选框的列表，只需使用v-model。

【解决方案3】：

所以，假设你有这些数据：

data() {
  return {
    possable: [1,2,3,4,5],
    savedcbx: [3,4]
   }
}

如果您想将新项目添加到 savedcbx 中，只需将其推送到数组中（确保它不存在）

addSavedId (id) {
  // Don't add it if it already exists
  if(this.savedcbx.indexOf(id) !== -1) return;

  this.savedcbx.push(id);
}

要删除一个项目：

removeSavedId (id) {
  let index = this.savedcbx.indexOf(id);

  // Nothing to remove if item is not in array
  if(index === -1) return;

  // Remove `index`
  this.savedcbx.splice(index, 1);
}

现在由您决定何时调用addSavedId(id) 和removeSavedId(id) 函数以及id 的参数是什么。

【讨论】：

@lauri108 这并没有解释如何将选中的复选框链接到他的savedcbx 数组。只有在“已保存”复选框的意思是“已选中”复选框时，它才有效。