当 v-for 与对象的属性一起使用时，将 v-model 与复选框一起使用

Posted 2023-02-22

【中文标题】当 v-for 与对象的属性一起使用时，将 v-model 与复选框一起使用

【英文标题】：Use v-model with a checkbox when v-for is used with properties of an object

【发布时间】：2019-03-12 11:46:36

【问题描述】：

将v-model 与复选框一起使用当v-for 与对象数组一起使用时：

new Vue(
  el: '#example',
  data: 
    names: [
       name: 'jack', checked: true ,
       name: 'john', checked: false ,
       name: 'mike', checked: false 
    ]
  
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id='example'>
  <div v-for="(item, index) in names" :key="index">
  <input type="checkbox" :id="item.name" v-model="item.checked">
  <label :for="item.name"> item.name   item.checked </label>
  </div>
</div>

v-model 与复选框一起使用不起作用当v-for 与对象的属性一起使用时：

new Vue(
  el: '#example',
  data: 
    names: 
      jack: true,
      john: false,
      mike: false
    
  
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id='example'>
  Does not work with v-for:
  <div v-for="(value, key, index) in names" :key="index">
  <input type="checkbox" :id="key" v-model="value">
  <label :for="key"> key   value </label>
  </div>
  But it does work without v-for:
  <br>
  <input type="checkbox" id="jack" v-model="names.jack">
  <label for="jack">jack</label>
  <br>
  <input type="checkbox" id="john" v-model="names.john">
  <label for="john">john</label>
  <br>
  <input type="checkbox" id="mike" v-model="names.mike">
  <label for="mike">mike</label>
  <br>
  And it even changes the checkbox above!
</div>

但是将v-model 与复选框一起使用适用于没有v-for 的对象的属性！

这是为什么呢？我该如何解决？我真的需要v-for 来使用对象的属性！

编辑：我不需要检查值的数组，我需要更改对象属性的确切值。

【参考方案1】：

语法v-model="names[key]" 可以工作，见Dynamic v-model directive

new Vue(
  el: '#example',
  data: 
    names: 
      jack: true,
      john: false,
      mike: false
    
  
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id='example'>
  Does not work with v-for:
  <div v-for="(value, key, index) in names" :key="index">
    <input type="checkbox" :id="key" v-model="names[key]">
    <label :for="key"> key   value </label>
  </div>
  But it does work without v-for:
  <br>
  <input type="checkbox" id="jack" v-model="names.jack">
  <label for="jack">jack</label>
  <br>
  <input type="checkbox" id="john" v-model="names.john">
  <label for="john">john</label>
  <br>
  <input type="checkbox" id="mike" v-model="names.mike">
  <label for="mike">mike</label>
  <br>
  And it even changes the checkbox above!
</div>

【讨论】：

非常感谢，我花了整个晚上的时间来解决这个问题......我不知道为什么我在文档中错过了这个语法......