如何制作一个包含附加到 v-for 指令切换状态中的对象的复选框的列表（不切换列表中的其他复选框）？-PHP中文网问答

我正在尝试制作一个使用 VueJS (2.x) 的客户端待办事项列表。这是我的 HTML：

    
    
    
        
        To-do List
        
    
    
        
        
            To-do List
            Completed Tasks!
            
                {{ item.description }}
            
            Uncompleted Tasks!
            
                {{ item.description }}

然后在scripts/app.js 中我这样做了：

    'use strict'
    
    let app = new Vue({
    
        el      : "#app",
        data    : {
            tasks: [
                { description: 'Say Hello', done: true },
                { description: 'Review Code', done: false },
                { description: 'Read Emails', done: false },
                { description: 'Reply to Emails', done: false },
                { description: 'Wash The Dishes', done: true },
                { description: 'Stop Working', done: true },
            ]
        },
        computed : {
            complete : function() {
                return this.tasks.filter(task => task.done === true);
            },
            uncomplete : function() {
                return this.tasks.filter(task => task.done === false);
            }
        }
    
    });

我的问题很简单：当我更改给定列表中复选框的状态（选中或取消选中它）时，紧随其后的复选框也会切换状态。

我不明白为什么会发生这种情况以及如何解决它。如果有人能告诉我为什么会发生这种情况（这样我就不必在 v-for/switch-state 行为不端时回到这里）以及如何修复它，那就太棒了！