VueJS 代码 - 错误的行为 - 怎么了？

Question

我在 VueJs 中有这段代码，简单的任务列表，已完成和未完成的，当我选中或取消选中该框时，任务应该移动到正确的列表中。

var app = new Vue({
  el: '#vueapp',
  data: {
    tasks: [{
        id: 1,
        description: 'Do some Stuff',
        completed: false
      },
      {
        id: 2,
        description: 'Go to pharmacy',
        completed: false
      },
      {
        id: 3,
        description: 'Go to doctor',
        completed: true
      },
      {
        id: 4,
        description: 'Do some Slask',
        completed: false
      },
    ]
  },
  methods: {
    toggleTask(key) {
      this.tasks[key].completed = !this.tasks[key].completed;
    }
  },
  computed: {
    incompleteTasks() {
      return this.tasks.filter(task => !task.completed);
    },
    completedTasks() {
      return this.tasks.filter(task => task.completed);
    },
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="vueapp">
  <h2>Completed Tasks</h2>
  <ul>
    <li v-for="(task, key) in completedTasks">{{ task.description }}<input type="checkbox" v-model="task.completed"></li>
  </ul>

  <h2>Incomplete Tasks</h2>
  <ul>
    <li v-for="(task, key) in incompleteTasks">{{ task.description }}<input type="checkbox" v-model="task.completed"></li>
  </ul>
</div>

在 Chrome 中测试。尝试检查第一个未完成的任务，它成功移动到上列表中，但下一个未完成的任务也被检查。！！！

Answer 1

您需要将key 添加到您的循环:key="task.id"。

要给 Vue 一个提示以便它可以跟踪每个节点的身份，从而重用和重新排序现有元素，您需要为每个项目提供唯一的 key 属性。 key 的理想值是每个项目的唯一 ID。

var app = new Vue({
  el: '#vueapp',
  data: {
    tasks: [{
        id: 1,
        description: 'Do some Stuff',
        completed: false
      },
      {
        id: 2,
        description: 'Go to pharmacy',
        completed: false
      },
      {
        id: 3,
        description: 'Go to doctor',
        completed: true
      },
      {
        id: 4,
        description: 'Do some Slask',
        completed: false
      },
    ]
  },
  methods: {
    toggleTask(key) {
      this.tasks[key].completed = !this.tasks[key].completed;
    }
  },
  computed: {
    incompleteTasks() {
      return this.tasks.filter(task => !task.completed);
    },
    completedTasks() {
      return this.tasks.filter(task => task.completed);
    },
  }
});

.as-console-wrapper { display: none !important; }

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="vueapp">
  <h2>Completed Tasks</h2>
  <ul>
    <li v-for="(task, key) in completedTasks" :key="task.id">{{ task.description }}<input type="checkbox" v-model="task.completed"></li>
  </ul>

  <h2>Incomplete Tasks</h2>
  <ul>
    <li v-for="(task, key) in incompleteTasks" :key="task.id">{{ task.description }}<input type="checkbox" v-model="task.completed"></li>
  </ul>
</div>