Vue.js开发待办应用点击删除单个任务无响应问题排查

功能失效由两个核心错误导致：

• 中间层事件透传丢失参数：Tasks.vue中监听子组件Task抛出的delete-task事件时，触发自身向上emit的逻辑没有携带任务id参数，顶层App.vue的删除方法拿不到目标任务id，过滤逻辑无法匹配到要删除的项，界面无变化。
• Props类型声明错误：Task.vue中声明接收的tasks类型为Object，但父组件实际传递的是任务数组，类型校验失败会导致遍历、事件绑定出现异常。

1. 修改Tasks.vue的事件绑定，透传子组件抛出的id参数，使用$event接收自定义事件携带的参数即可
2. 修改Task.vue的props声明，将tasks的类型从Object改为Array，匹配父组件传递的数据类型

App.vue（无需修改，原有逻辑正常） #

<template>
  <Tasks :tasks="tasks" @delete-task="deleteTask" />
</template>

<script>
import Tasks from "./components/Tasks.vue";

export default {
  name: "App",
  components: {
    Tasks,
  },
  data() {
    return {
      tasks: [],
    };
  },
  methods: {
    deleteTask(id) {
      this.tasks = this.tasks.filter((task) => task.id !== id);
    },
    addTask(newTask) {
      this.tasks = [...this.tasks, newTask];
    },
  },
  created() {
    this.tasks = [
      {
        id: 0,
        text: "Grocery shopping",
        date: "March 25, 2022",
        reminder: true,
      },
      {
        id: 1,
        text: "Doctors Appointment",
        date: "March 30, 2022",
        reminder: true,
      },
      {
        id: 2,
        text: "Pay Bills",
        date: "April 1, 2022",
        reminder: false,
      },
    ];
  },
};
</script>

Tasks.vue #

<template>
  <div>
    <!-- 修正：透传事件时携带子组件抛出的id参数 -->
    <Task :tasks="tasks" @delete-task="$emit('delete-task', $event)" />
  </div>
</template>

<script>
import Task from "./Task.vue";

export default {
  name: "Tasks",
  emits: ["delete-task"],
  components: {
    Task,
  },
  props: {
    tasks: Array,
  },
};
</script>

Task.vue #

<template>
  <div v-for="task in tasks" :key="task.id" @click="onDelete(task.id)">
    <p>{{ task.text }}</p>
    <p>{{ task.date }}</p>
  </div>
</template>

<script>
export default {
  name: "Task",
  emits: ["delete-task"],
  props: {
    // 修正：匹配父组件传递的数组类型
    tasks: Array,
  },
  methods: {
    onDelete(id) {
      this.$emit("delete-task", id);
    },
  },
};
</script>

• 开发时优先看浏览器控制台的报错、警告信息，props类型不匹配、事件未注册这类问题都会有明确提示
• 多层组件透传事件时，可在每层事件回调中打印传入参数，快速定位参数丢失的层级
• 基础语法吃透后再做实战练习，优先掌握组件props传值、自定义事件传参的核心规则，能避免80%的这类初级问题

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