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

标签 javascript html vue.js vuejs2

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处理对象的属性!

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

最佳答案

语法 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>

关于javascript - 当 v-for 与对象的属性一起使用时,将 v-model 与复选框一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52691527/

相关文章:

javascript - 滚动到 Vue 中模式窗口的底部

javascript - 多张幻灯片的 ORDER BY

javascript - 动态改变 Google map 上绘制的圆圈的颜色

javascript - 显示/隐藏选项卡箭头以在溢出时导航其他选项卡

javascript - 如何修改进度条的Javascript以跟踪水平网站上的滚动

css - 如何防止div位置为:relative to allocate extra space

javascript - "Unsafe JavaScript attempt to access frame with URL..."与本地文件

css - Vuetify 网格列换行填充全高

javascript - 在 Vue 中渲染只读内容的最佳方法

javascript - 清除数组中一项的超时 - javascript