Vue待办列表问题：点击按钮无法定位对应数组项

嘿，我来帮你搞定这个问题！你遇到的核心问题是点击按钮时没法精准定位到对应的任务项，其实只要调整一下v-for的绑定和点击事件的传参就能解决，下面给你几个实用的方案：

方案一：点击事件直接传递当前任务对象 #

这是最直接的方法，在v-for循环里，给按钮的点击事件绑定当前循环的task对象，这样在方法里就能直接修改它的completed属性：

模板部分 #

<!-- 未完成任务列表 -->
<h3>未完成任务</h3>
<ul>
  <li v-for="task in tasks.filter(t => !t.completed)" :key="task.id">
    {{ task.content }}
    <!-- 点击时把当前task传进方法 -->
    <button @click="markCompleted(task)">标记为完成</button>
  </li>
</ul>

<!-- 已完成任务列表 -->
<h3>已完成任务</h3>
<ul>
  <li v-for="task in tasks.filter(t => t.completed)" :key="task.id">
    {{ task.content }}
  </li>
</ul>

脚本部分 #

export default {
  data() {
    return {
      tasks: [
        { id: 1, content: '学习Vue响应式', completed: false },
        { id: 2, content: '写待办列表', completed: false }
      ]
    };
  },
  methods: {
    markCompleted(task) {
      // 直接修改任务的completed属性，Vue响应式会自动更新列表
      task.completed = true;
    }
  }
};

方案二：通过任务ID定位（适合复杂场景） #

如果你的场景里不方便直接传递任务对象，也可以传递任务的唯一ID，然后在方法里通过ID找到对应的任务再修改：

模板部分 #

<button @click="markCompletedById(task.id)">标记为完成</button>

脚本部分 #

methods: {
  markCompletedById(taskId) {
    // 通过find方法找到对应ID的任务
    const targetTask = this.tasks.find(task => task.id === taskId);
    if (targetTask) {
      targetTask.completed = true;
    }
  }
}

关键注意点：绑定正确的key值 #

一定要给v-for的<li>绑定唯一且稳定的key（比如任务的id），不要用循环的index当key！因为当数组元素顺序变化时，index会跟着变，Vue的虚拟DOM会识别错误，导致按钮和任务项的对应关系混乱。

这样调整之后，点击按钮就能精准定位到对应的任务，修改completed属性后，未完成和已完成列表会自动更新啦～

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