I have two component organisms:
Both of them component will render into one page.
filter component will pass the props into table component for update data in table. This is the simple part of my code.
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>
I don't know why my component is not updating the props when I call the props inside of my methods, but if I am rendering or print it into vue template the component properly updates.
PS: I am using nuxt v2.11.
you did not bind the filter in filter-component
it's not a good idea to update the props directly which may cause errors.
use computed for your sub component instead of updating the props dircetly
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)
}
}
}
in your PageComponent:
<filter-component v-model="filter" />