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

Question

以下代码应该根据完成状态列出一系列任务。 当我使用 2.5.xx Vue cdn 链接时，它工作得很好。

但是，对于当前版本的 cdn (>= 2.6.0)，每当我从任一列表中选中/取消选中任务时，列表中的下一项也会被选中/取消选中，即使它的完成状态属性不受影响（我可以看到它与 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 有什么改变吗？

这是使用 Vue 2.6.10 重现问题的小提琴

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

Answer 1

正如Thanksd所指出的，包括一个:key到v-for解决了这个问题。

在文档中，它说：

此默认模式是有效的，但仅适用于您的列表呈现 output 不依赖子组件 state 或临时 DOM state （例如表单输入值）时。

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