Question

我正在使用vue制作一个小型的待办事项应用程序。问题在于，当我单击第一个复选框以将其标记为已完成任务时，下一个任务的复选框会自动选中，但是当我单击最后一个复选框时却不会发生。

我已经在我的机器上尝试过了，但是没有用。 https://jsfiddle.net/razvantirboaca/9aqsjj30/

<div id="app">
  <h1>Incomplete Tasks</h1>
    <ul>
         <li v-for="task in incompleteTasks">
            <label> 
               <input type="checkbox" v-model="task.completed">
               {{ task.description }}
            </label> 
         </li>
    </ul>
   <h1>Complete Tasks</h1>
    <ul>
         <li v-for="task in completeTasks">
            <label> 
               <input type="checkbox" v-model="task.completed">
               {{ task.description }}
            </label> 
         </li>
    </ul>

new Vue({
    el: '#app',

    data: {
        tasks: [
            { description: 'First Task', completed: false },
            { description: 'Second Task', completed: false },
            { description: 'Third Task', completed: false },
            { description: 'Fourth Task', completed: false }
        ]
    },

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

        completeTasks() {
            return this.tasks.filter(task => task.completed);
        }
    }
})

Answer 1

向v-for元素添加键。如果有唯一的ID，您可以使用它，但是由于我在当前数据中看不到它，因此我以description为例。

<li v-for="task in incompleteTasks" :key="task.description">

<li v-for="task in completeTasks" :key="task.description">

为什么复选框选中后会自动选中下一个复选框

1 个答案: