我如何在 vue js 中发送带有道具的方法？我在组件中有 2 种方法，但其中一种不起作用？

Question

嗨，朋友，我有一个问题。我想用 Vue 创建待办事项列表应用程序，我现在有 3 个组件：任务组件在任务组件中，在应用程序组件中（任务是任务的子项，任务是应用程序的子项）

我要处理删除这个任务并设置提醒这个任务我有一个任务数组，里面有一些对象，从 app.vue 传递到任务组件我在具有布尔值

的任务对象中有一个属性提醒

我想用 handleDelete 删除任务，但是这个函数有错误但当我在应用程序组件中编写此功能时，它起作用了！并在任务中设置提醒有效！

为什么 handleDelete 在 tasks 组件中不起作用，而 setReminder 在其中起作用？

我的应用组件：

        <template>
      <div class="container">
        <Header title="write your task" />
        <Tasks :tasks="tasks" />
      </div>
    </template>
    
    <script>
    import Header from "./components/Header";
    import Tasks from "./components/Tasks";
    export default {
      name: "App",
      components: {
        Header,
        Tasks,
      },
      data() {
        return {
          tasks: [],
        };
      },
      methods: {
       
      },
      created() {
        this.tasks = [
          {
            id: 1,
            text: "do project",
            day: "march 3rd at 1pm",
            reminder: true,
          },
          {
            id: 2,
            text: "rest",
            day: "march 3rd at 1pm",
            reminder: false,
          },
          {
            id: 3,
            text: "sleep",
            day: "march 3rd at 1pm",
            reminder: true,
          },
          {
            id: 4,
            text: "running",
            day: "march 3rd at 1pm",
            reminder: true,
          },
          {
            id: 5,
            text: "do homework",
            day: "march 3rd at 1pm",
            reminder: true,
          },
          {
            id: 6,
            text: "go home",
            day: "january 3rd at 1pm",
            reminder: false,
          },
        ];
      },
    };
    </script>

我的任务组件是：

<template>
  <div v-for="task in tasks" :key="task.id">
    <Task :task="task" :tasks="tasks" 
    @DeleteTask="handleDeleteTask" 
    @toggle-reminder ="setReminder"
    />
  </div>
</template>

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

export default {
  name: "Tasks",
  props: {
    tasks: Array,
  },
  components: {
    Task,
  },
  methods: {
 handleDeleteTask(id) {
      console.log(this.tasks);
      this.tasks = this.tasks.filter((i) => i.id !== id);
      console.log(this.tasks);
    },
    setReminder(id) {
      const index = this.tasks.findIndex((task) => task.id === id);
      console.log(this.tasks[index].reminder);
      this.tasks[index].reminder = !this.tasks[index].reminder;
      console.log(this.tasks[index].reminder);
    },
  },
};
</script>

一个任务组件是：

<template>
  <div
    :class="[task.reminder ? 'reminder' : '', 'task']"
    @dblclick="$emit('toggle-reminder' , task.id)"
  >
    <h3>
      {{ task.text }}
      <i class="fas fa-times" @click="this.$emit('DeleteTask', id);"></i>
    </h3>
    <p>{{ task.day }}</p>
  </div>
</template>

<script>
export default {
  name: "Task",
  props: {
    task: Object,
    tasks: Array,
  },


};
</script>

Answer 1

task.id

在这里你直接传递 id 应该是 task.id

//From
<i class="fas fa-times" @click="this.$emit('DeleteTask', id);"></i>
//To
<i class="fas fa-times" @click="this.$emit('DeleteTask', task.id);"></i>

没有道具突变

你不应该改变 prop 值，不应该修改 prop 传递的任何变量，它是父组件中原始变量的图像，你应该像你做的那样在你 tasks.vue -> app.vue 中设置新的发射器task.vue -> tasks.vue

检查这个工作sandbox

命名规则

浏览器会对@DeleteTask（任务组件中的事件侦听器）感到困惑，并且不会link将其添加到事件中，因为它对他来说是@deletetask

你已经在 kebab-case 中命名了另一个，这就是它工作的原因

改变 @click="this.$emit('DeleteTask', id);"
至 @click="this.$emit('delete-task', id);"

和 @DeleteTask
至 @delete-task;

Naming conventions from the Vue docs say to always name events with kebab-case. The reason for this is that when Vue compiles its HTML, HTML does not differentiate between upper or lowercase letters

我如何在 vue js 中发送带有道具的方法？我在组件中有 2 种方法，但其中一种不起作用？

how can i send methods with props in vue js? i have 2 methods in components but one of them didnt work?

vue.js

vue-router

vue-component

task.id

没有道具突变

命名规则