Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

110
Vistas
Component not updating properties

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.

10 months ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

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" />
10 months ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos