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

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 重现问题的 fiddle

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

Answer 1

正如 thanksd 所指出的，包括 :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 版本之前可以工作