Tengo dos organismos componentes:
Ambos componentes se renderizarán en una sola página.
El componente de filtro pasará los accesorios al componente de la tabla para actualizar los datos en la tabla. Esta es la parte simple de mi código.
FilterComponent
passUpdateToParent() { this.$emit("update", this.filter) // I just emit this variable }, processResetFilter() { this.filter = { search: {}, value: "" } this.passUpdateToParent() }, TableComponent
... props : { filter: {default : () => ({}), ... // another props }, methods:{ testGetFilter(){ console.log(this.filter) // this props not update if I call in one time, but when I call in twice this props updated. } } <template> <section> {{ filter }} <!-- updated properly --> </section> </template> PageComponent
components: { FilterComponent: () => import("@/components/FilterComponent"), TableComponent: () => import("@/components/TableComponent"), }, data :() => ({ filter :{} }), methods : { processGetFilter(value){ this.filter = value }, } <template> <section> <filter-component @update="processGetFilter" /> <table-component :filter="filter" /> </section> </template>No sé por qué mi componente no actualiza los accesorios cuando llamo a los accesorios dentro de mis métodos, pero si lo renderizo o lo imprimo en la plantilla vue, el componente se actualiza correctamente.
PD: estoy usando nuxt v2.11.
no vinculaste el filter en filter-component
no es una buena idea actualizar los accesorios directamente, lo que puede causar errores.
use computed para su subcomponente en lugar de actualizar los accesorios directamente
FilterComponent
// update the computed filter instead of props value <input v-model="filter.value"/> .... props: { value: { default: () => {} } }, computed: { filter: { get() { return this.value; }, set(newFilter) { this.$emit('input', newFilter) } } }en su componente de página:
<filter-component v-model="filter" />