Usando Vue 3.2 y tengo la impresión de que sigo la documentación
Estoy enviando una matriz de objetos a un componente secundario y, a cambio, estoy tratando de emitir un evento al componente principal para que un objeto (identificado por id) se elimine de la matriz.
// parent <template> <TheAccountLines :lines=recurrents_credits @goaway(id)="goaway(id)" /> </template> <script setup> import { find } from "lodash" // this doesn't get called at all, just putting it here to show that the function exists. const goaway = (id) => { var line = find (state.accounts, {id:id}) console.log(line) } </script> // child component <template> <div v-for="line in lines" :key="line.id"> <span @click="goaway(line.id)" >X</span> {{ line.foo) }} {{ line.bar}} </div> </template> <script setup> const props = defineProps({ 'lines': Array)} const emit = defineEmits(['goaway']) const goaway = (id) => emit('goaway', id) </script>Al cargar la página, recibo este mensaje en la consola: Los oyentes de eventos extraños que no emiten (goaway (id)) se pasaron al componente pero no se pudieron heredar automáticamente porque el componente representa fragmentos o nodos raíz de texto. Si el oyente está destinado a ser solo un oyente de eventos personalizado de componente, declárelo usando la opción "emite".
Entiendo que la opción "emite" es defineProps . Pero debo estar equivocado.
Creo que el problema es: debes usar @goaway , pero no @goaway(id) .
Parte de la plantilla:
<template> <!--- THIS IS WRONG, SEE UPDATE BELOW --> <TheAccountLines :lines="recurrents_credits" @goaway(id)="goaway(id)" /> </template> Por cierto, puedes usar onGoaway prop instand @goaway :
// parent component <template> <TheAccountLines :lines="recurrents_credits" @goaway="goaway" /> </template> // child component <script setup> const props = defineProps(['onGoaway']) const emitDelete = (id) => { props.goaway(id) } </script>Como siempre, después de horas de búsqueda, encuentro la respuesta 5 minutos después de hacer la pregunta aquí. No eliminaré la pregunta (a menos que la moderación prefiera que lo haga).
El error estaba en el padre: no use los parámetros en la emisión:
<TheAccountLines :lines=recurrents_credits @goaway="goaway" />