Vue props data not updating in child component

Question

Hi everyone I just want some explanation about vue props data. So I'm passing value from parent component to child component. The thing is when parent data has data changes/update it's not updating in child component.

Vue.component('child-component', {
  template: '<div class="child">{{val}}</div>',
  props: ['testData'],
  data: function () {
    return {
        val: this.testData
    }
  }
});

But using the props name {{testdata}} it's displaying the data from parent properly

Vue.component('child-component', {
  template: '<div class="child">{{testData}}</div>',
  props: ['testData'],
  data: function () {
    return {
        val: this.testData
    }
  }
});

Thanks in advance

Fiddle link

You're creating a copy in val: this.testData. This is pretty much down to JS references. — Phil
– Phil, Commented Mar 22, 2018 at 2:01
The data function is called once in the component lifetime, which means that val is set when the component is created. There is nothing that automatically updates val in your code. You likely want val to be a computed property, or just render the prop. Or you would watch testData and update val when a change occurs. — Bert
– Bert, Commented Mar 22, 2018 at 2:07

tony19 · Accepted Answer · 2022-07-15 02:44:46Z

7

This is best explained with a very simple example

let a = 'foo'
let b = a
a = 'bar'

console.info('a', a)
console.info('b', b)

When you assign...

val: this.testData

you're setting the initial value of val once when the component is created. Changes to the prop will not be reflected in val in the same way that changes to a above are not reflected in b.

See https://v2.vuejs.org/v2/guide/components.html#One-Way-Data-Flow

edited Jul 15, 2022 at 2:44

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 22, 2018 at 2:08

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

grant zukowski Over a year ago

this doesn't answer the question of how to make the props dynamic.

Phil Over a year ago

@grantzukowski that's not what OP was asking. This answers the question asked. In fact, I have no idea what you're talking about

grant zukowski Over a year ago

He was asking how to make the passed in prop value dynamic, so if it changes, the child reacts.

Phil Over a year ago

@grantzukowski no "he" is not. I suggest you read the question and the comments on the question again. OP's question makes it quite clear that they're able to see changes to the passed in prop values (see second snippet)

grant zukowski Over a year ago

Its literally exactly what I said. I suggest you read the question again. In this case, I think the prop needs to be passed in as a computed value and there needs to be a watcher in the child. Explaining the concept is not answering the question. stackoverflow.com/questions/50035675/…

|

Léa Gris · Accepted Answer · 2019-09-05 19:04:50Z

0

I resolve with! this.$set(this.mesas, i, event);

data() {
    return { mesas: [] }
},
components: {
    'table-item': table_l,    
},
methods: {
    deleteMesa: function(event) {
        let i = this.mesas.map(item => item.id).indexOf(event.id);
        console.log("mesa a borrare", i); 
        this.mesas.splice(i, 1);
    },
    updateMesa: function(event) {
        let i =this.mesas.map(item => item.id).indexOf(event.id);
        console.log("mesa a actualizar", i); 
        ///    With this method Vue say Warn
        //this.mesas[i]=event;  
        /// i Resolve as follow
        this.$set(this.mesas, i, event);
     },
     // Adds Useres online
     addMesa: function(me) {
         console.log(me);
         this.mesas.push(me);
     }
}

edited Sep 5, 2019 at 19:04

Léa Gris

20.2k4 gold badges39 silver badges52 bronze badges

answered Sep 5, 2019 at 17:12

luigivirgo

1

Collectives™ on Stack Overflow

Vue props data not updating in child component

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related