vue checkbox v-model 绑定在当前版本中无法正常工作

Question

下面的代码应该根据完成状态列出一系列任务。当我使用 2.5.xx Vue cdn link.

时它工作得很好

然而，对于当前版本的 cdn (>= 2.6.0)，每当我从任一列表中 check/uncheck 一个任务时，列表中的下一个项目也是 checked/unchecked，即使它已完成状态属性不受影响（我可以用 Vue Chrome 扩展看到它）除非我再次点击它。

    <div id="root">
      <h3>Incomplete Tasks</h3>
      <ul>
        <li v-for="task in incompleteTasks">
          <input type="checkbox" v-model="task.completed"> {{ task.description }}
        </li>
      </ul>

      <h3>Completed Tasks</h3>
      <ul>
        <li v-for="task in completedTasks">
          <input type="checkbox" v-model="task.completed"> {{ task.description }}
        </li>
      </ul>
    </div>

new Vue({
  el: '#root',

  data: {
    tasks: [{
        description: 'Go to the store',
        completed: true
      },
      {
        description: 'Finish screencast',
        completed: false
      },
      {
        description: 'Make donation',
        completed: false
      },
      {
        description: 'Clear inbox',
        completed: false
      },
      {
        description: 'Make dinner',
        completed: false
      },
      {
        description: 'Clean room',
        completed: true
      },
    ]
  },

  computed: {
    completedTasks() {
      return this.tasks.filter(task => task.completed);
    },

    incompleteTasks() {
      return this.tasks.filter(task => !task.completed);
    },
  },
});

这是一个错误吗？我们应该如何使用 v-model 有什么变化吗？

这里是 fiddle 使用 Vue 2.6.10 重现问题

https://jsfiddle.net/flayshon/fd7mejvo/2/

Answer 1

正如所指出的，包括 :key 到 v-for 可以解决问题。

在 documentation 中，它说：

This default mode is efficient, but only suitable when your list render output does not rely on child component state or temporary DOM state (e.g. form input values).

我想在这种情况下复选框是子组件，但仍然不确定为什么它在 2.6 版本之前可以工作

vue checkbox v-model 绑定在当前版本中无法正常工作

vue checkbox v-model binding not working properly in the current version

vue.js

checkbox

v-model