Vue2中v-for列表绑定对象的复选框如何安全切换状态不影响其他项？

问题原因 #

你的v-for循环未指定唯一的:key属性，Vue在更新列表时会采用就地复用DOM的策略。当某个任务的done状态切换时，该任务会从当前列表（如“已完成”）移至另一列表（如“未完成”），此时Vue会复用原有DOM元素，导致相邻复选框的状态被错误继承，出现“切换一个复选框，紧随其后的复选框状态也改变”的问题。

修复方案 #

1. 为v-for添加唯一:key #

为每个列表项指定唯一标识作为key，让Vue能准确识别每个节点，避免DOM复用导致的状态混乱。推荐使用任务的唯一ID（若没有可新增），而非索引（索引随列表顺序变化会失效）。

2. 统一状态切换逻辑 #

将模板中直接修改item.done的逻辑，移至Vue实例的methods中，使代码更规范且易于维护。

修改后的代码 #

HTML部分 #

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>To-do List</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
    
    <div id="app">
        <h1>To-do List</h1>
        <h2>Completed Tasks!</h2>
        <ul>
            <!-- 添加:key="item.id"，绑定toggleTask方法 -->
            <li v-for="item in complete" :key="item.id">
                {{ item.description }}
                <input type="checkbox" :checked="item.done" @change="toggleTask(item)">
            </li>
        </ul>
        <h2>Uncompleted Tasks!</h2>
        <ul>
            <!-- 添加:key="item.id"，绑定toggleTask方法 -->
            <li v-for="item in uncomplete" :key="item.id">
                {{ item.description }}
                <input type="checkbox" :checked="item.done" @change="toggleTask(item)">
            </li>
        </ul>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.13/dist/vue.js"></script>
    <script type="module" src="scripts/app.js"></script>
</body>
</html>

scripts/app.js部分 #

'use strict'

let app = new Vue({
    el      : "#app",
    data    : {
        tasks: [
            // 为每个任务添加唯一id
            { id: 1, description: 'Say Hello', done: true },
            { id: 2, description: 'Review Code', done: false },
            { id: 3, description: 'Read Emails', done: false },
            { id: 4, description: 'Reply to Emails', done: false },
            { id: 5, description: 'Wash The Dishes', done: true },
            { id: 6, 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);
        }
    },
    // 添加toggleTask方法统一处理状态切换
    methods: {
        toggleTask(item) {
            item.done = !item.done;
        }
    }
});

说明 #

• 添加:key后，Vue会根据唯一标识追踪每个列表项的DOM元素，当任务在列表间移动时，会正确更新对应的节点，而非复用相邻元素。
• 统一的toggleTask方法让状态修改逻辑集中，便于后续扩展（比如添加本地存储、状态验证等）。

内容的提问来源于stack exchange，提问作者Paiku Han