Child component not properly receiving updated Vue props data

Question

Child component not properly receiving updated Vue props data

Hey everyone, I'm seeking clarity on Vue props data. I've been passing values from a parent component to a child component. The issue I'm facing is that when the data in the parent component changes or updates, it doesn't reflect in the child component.

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

However, if I use the props name {{testdata}}, it correctly displays the data from the parent.

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

Thank you in advance for your help!

Fiddle link

javascript vue.js vuejs2 frontend vue-component

Answer 1

Answer №1

Let me illustrate this concept with a straightforward example

let x = 'hello'
let y = x
x = 'world'

console.log('x:', x)
console.log('y:', y)

When you set...

val: this.sampleData

You are defining the initial value of val when the component is first created. Any changes to the prop will not affect val, similar to how modifications in x do not impact y.

For more information, visit https://v2.vuejs.org/v2/guide/components.html#One-Way-Data-Flow

Answer 2

Let me illustrate this concept with a straightforward example

let x = 'hello'
let y = x
x = 'world'

console.log('x:', x)
console.log('y:', y)

When you set...

val: this.sampleData

You are defining the initial value of val when the component is first created. Any changes to the prop will not affect val, similar to how modifications in x do not impact y.

For more information, visit https://v2.vuejs.org/v2/guide/components.html#One-Way-Data-Flow

Answer 3

Answer №2

I am determined to solve this! 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("deleting table", i); 
        this.mesas.splice(i, 1);
    },
    updateMesa: function(event) {
        let i =this.mesas.map(item => item.id).indexOf(event.id);
        console.log("updating table", i); 
        ///    Using this method Vue shows a warning
        //this.mesas[i]=event;  
        /// Here is how I solved it
        this.$set(this.mesas, i, event);
     },
     // Adds new tables
     addMesa: function(newTable) {
         console.log(newTable);
         this.mesas.push(newTable);
     }
}

Answer 4

I am determined to solve this! 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("deleting table", i); 
        this.mesas.splice(i, 1);
    },
    updateMesa: function(event) {
        let i =this.mesas.map(item => item.id).indexOf(event.id);
        console.log("updating table", i); 
        ///    Using this method Vue shows a warning
        //this.mesas[i]=event;  
        /// Here is how I solved it
        this.$set(this.mesas, i, event);
     },
     // Adds new tables
     addMesa: function(newTable) {
         console.log(newTable);
         this.mesas.push(newTable);
     }
}

Child component not properly receiving updated Vue props data

Answer №1

Answer №2

Similar questions

One typical approach in React/JavaScript for monitoring the runtime of every function within a program

There is a lag in the loading of css stylesheets

The $.ajax request encounters an error when trying to parse the data as JSON

Determine the text's length inside a div element by utilizing the div itself

Steps to trigger a JavaScript popup from an iframe window to the parent window

Angular is having trouble with the toggle menu button in the Bootstrap template

Limiting a text based on spaces or at the completion of a word within a string or sentence

What is the best way to implement Bootstrap's range input design with noUiSlider?

Attempting to configure Kafka consumer and producer components

What is the method for specifying a null value in Typescript?

Prevent duplicate key errors when performing bulk insert operations with MongoDB

Effortlessly upload multiple dynamic files using Nest JS

Enhancing Pinia setup stores with custom getters, setters, and actions for improved reusability

Dealing with unexpected behavior in NodeJS multi-class file by listening for uncaught exceptions using the `process.on('uncaughtException

Issues with Internet Explorer's scaling functionality are preventing it from operating correctly

Guide on incorporating Admin LTE 3 into Nuxt.js

Looking to add a gradient color to the header in React JS?

Ensure that the dynamically inserted <title> tag remains intact in Angular even when the page is re

Obtain the templateUrl using the ui-router functionality

Using npm link with Webpack results in eslint errors