复选框组的vuejs模型

Question

我有 2 个数组，一个用于可能的复选框变体，另一个用于已保存的选中 boxes.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>

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

Answer 1

所以，假设您有以下数据：

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.

Answer 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>

Answer 3

只需要一个数组就可以实现切换。来自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: []
  }
})

复选框组的vuejs模型

vuejs model for checkbox group

arrays

checkboxlist

vue.js