CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Ravi Garg
Ravi Garg

Reputation: 339

How to send updated values from Parent component to child component in Vue JS?

I am passing a variable from parent component to child component through props. But with some operation, the value of that variable is getting changed i.e. on click of some button in parent component but I did not know how to pass that updated value to child? suppose the value of one variable is false initially and there is Edit button in parent component. i am changing the value of this variable on click of Edit button and want to pass the updated value from parent to child component.

Upvotes: 33

Views: 50556

Answers (4)

ttngx
ttngx

Reputation: 51

You can use Dynamic Props.

This will pass data dynamically from the parent to the child component as you want.

Upvotes: 5

LakiGeri
LakiGeri

Reputation: 2105

You can watch a (props) variable with the vue watch.

for example:

<script>
export default {
  props: ['chatrooms', 'newmessage'],
  watch : {
    newmessage : function (value) {...}
  },
  created() {
    ...
  }
}
</script>

I hope this will solve your problem. :)

Upvotes: 14

Olajide Oye
Olajide Oye

Reputation: 364

Your property's value should be updated dynamically when using props between parent and child components. Based on your example and the initial state of the property being false, it's possible that the value was not properly passed into the child component. Please confirm that your syntax is correct. You can check here for reference.

However, if you want to perform a set of actions anytime the property's value changes, then you can use a watcher.

EDIT:

Here's an example using both props and watchers:

HTML

<div id="app">
    <child-component :title="name"></child-component>
</div>

JavaScript

Vue.component('child-component', {
  props: ['title'],
  watch: {
    // This would be called anytime the value of title changes
    title(newValue, oldValue) {
      // you can do anything here with the new value or old/previous value
    }
  }
});

var app = new Vue({
  el: '#app',
  data: {
    name: 'Bob'
  },
  created() {
    // changing the value after a period of time would propagate to the child
    setTimeout(() => { this.name = 'John' }, 2000);
  },
  watch: {
    // You can also set up a watcher for name here if you like
    name() { ... }
  }
});

Upvotes: 29

Gustavo Straube
Gustavo Straube

Reputation: 3871

Properties, where the value is an object, can be especially tricky. If you change an attribute in that object, the state is not changed. Thus, the child component doesn't get updated.

Check this example:

// ParentComponent.vue

<template>
    <div>
        <child-component :some-prop="anObject" />
        <button type="button" @click="setObjectAttribute">Click me</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                anObject: {},
            };
        },
        methods: {
            setObjectAttribute() {
                this.anObject.attribute = 'someValue';
            },
        },
    };
</script>

// ChildComponent.vue

<template>
    <div>
        <strong>Attribute value is:</strong>
        {{ someProp.attribute ? someProp.attribute : '(empty)' }}
    </div>
</template>

<script>
    export default {
        props: [
            'someProp',
        ],
    };
</script>

When the user clicks on the "Click me" button, the local object is updated. However, since the object itself is the same -- only its attribute was changed -- a state change is not dispatched.

To fix that, the setObjectAttribute could be changed this way:

setObjectAttribute() {

    // using ES6's spread operator
    this.anObject = { ...this.anObject, attribute: 'someValue' };

    // -- OR --

    // using Object.assign
    this.anObject = Object.assign({}, this.anObject, { attribute: 'someValue' });

}

By doing this, the anObject data attribute is receiving a new object reference. Then, the state is changed and the child component will receive that event.

Upvotes: 6

Related Questions