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

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() { ... }
  }
});

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)