• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

172
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.

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

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda