Component not updating properties

user_5606564 0
Viewed 224

I have two component organisms:

  • FilterComponent
  • TableComponent

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.

nuxt.js vue.js reactive-programming javascript
1 Answers

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" />
user_105190690
Related