[SOLVED] Vue "emit" alternative

Vue "emit" alternative

Vue complain when I use "emit" I'm looking for a same-functioning alternative

It will be a todo list

Code:

<button @click="$emit('delete-todo-event', todo.id)">Button</button>

Warnig in the Browser-Console:

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Extraneous non-emits event listeners deleteTodoEvent) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option. at <ToDos todoEntries= (9) [Proxy, Proxy, Proxy, Proxy, Proxy, Proxy, Proxy, Proxy, Proxy] onDeleteTodoEvent=fn<bound deleteToDoItem> > at <App>

Solution

You seem to be using Vue 3. The warning tells you that you did not declare your event before using it in your component. Here is an example:

export default {
  name: "YourComponent",
  emits: ["deleteTodoEvent"], // <--- this is what the warning in hinting to
  setup(_,{ emit }) {
    ...
  },
};