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

Posted 2023-02-22

技术标签:

【中文标题】如何在 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? 【发布时间】：2021-08-10 09:16:21 【问题描述】：

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

我想处理删除这个任务并设置提醒这个任务我有一个任务数组，其中包含一些从 app.vue 传递到任务组件的对象我在具有布尔值的任务对象中具有提醒属性

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

为什么handleDelete 在任务组件中不起作用，而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>

【问题讨论】：

【参考方案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>