Vue任务列表异常：点击新任务时首个任务被标记完成问题求助

问题原因 #

你的代码里completedHandler方法的find回调中，错误使用了赋值运算符=而非相等判断运算符===：

const currentTask=this.tasks.find((t)=> t._id=taskid);

这行代码会把传入的taskid赋值给遍历到的第一个任务的_id，然后返回这个被修改了_id的第一个任务，所以无论点击哪个新任务，最终修改的都是第一个任务的isCompleted状态。

修复步骤 #

把赋值运算符=替换成严格相等判断运算符===，确保正确匹配对应_id的任务：

const currentTask=this.tasks.find((t)=> t._id === taskid);

修复后的完整代码 #

<template>
  <h4>Today Tasks</h4>
  <div class="tasks">
    <div
      class="task"
      :class="{ completed: task.isCompleted }"
      v-for="task in tasks"
      :key="task._id"
      @click="completedHandler(task._id)"
    >
      <div
        class="round"
        :class="{
          business: task.type === 'business',
          personal: task.type === 'personal',
        }"
      ></div>
      <span>{{task.name}}</span>
    </div>
  </div>
  <div class="add-task">
    <input type="text" placeholder="Название задачи" v-model="taskName" />
    <button @click="addTask">+</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      taskName: "",
      tasks: [{
        _id: "wadawdawdwa",
        name: "Create to do app in Vue js",
        isCompleted: false,
        type: "personal",
      }]
    }
  },
  methods:{
    completedHandler:function(taskid){
      const currentTask=this.tasks.find((t)=> t._id === taskid);
      currentTask.isCompleted = !currentTask.isCompleted;
    },
    addTask: function(){
      this.tasks.push({
        _id: Math.random().toString(36).substring(2, 7),
        name: this.taskName,
        isCompleted: false,
        type: "personal",
      });
    },
  },
};
</script>

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