Custom event fired but not triggered-CodePudding

I have two components and I am trying to save data from one component into another but somehow the event isn't triggered by the parent component. I see no errors in the code must be something else.

When I add newTask I emit "some" event but is not triggering on the parent

App.vue file

<template>
  <h1>{{ message }}</h1>
  <Form></Form>
  <div @some="some">
    <Task :tasks="tasks" />
  </div>
</template>

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

export default {
  components: {
    Form,
    Task,
  },
  data() {
    return {
      message: "This is my first taks",
      tasks: [
        { status: "To do", title: "Some task not solved" },
        { status: "Done", title: "Make shopping" },
        { status: "Blocked", title: "That blocked" },
      ],
    };
  },
  methods: {
    some() {
      console.log("event fired");
    },
  },
};
</script>

Form.vue

<template>
  <input type="text" placeholder="new task" v-model="task" />
  <button @click="addTask">Add new Task</button>
</template>

<script>
export default {
  data() {
    return {
      task: "",
      tasks: [],
    };
  },
  methods: {
    addTask() {
      //  console.log(this.task);
      this.$emit("some", this.task);
    },
  },
};
</script>```

CodePudding user response：

You have to add your EventListener to the component from where the event is firing. And in your code it's the Task Component. So instead of listening from the div you may code like this,

<Task :tasks="tasks" @some="some" />