[Vuejs]-Props not linking with parent instance data

by

0👍

✅

You need to use the data from parent as binding source for product.

<div id="app">
 <product :premium="premium"></product>
</div>

Changing data.premium in parent should now propagate to the child.

0👍

You can see in the documentation: https://v2.vuejs.org/v2/guide/components-props.html#Passing-a-Boolean

in your case you can try this:

<div id="app">
    <product v-bind:premium="premium"></product>
</div>

Any change in "premium" should change the component "Product"

0👍

Have a look here 🙂

var app = new Vue({
  el: '#app',
  data: {
    premium: true, // Changing the value here also works
    shipping: "Free"
  }
})

Vue.component('product', {
  template: '',
  props: {
    premium: {
      type: Boolean,
      required: true
    }
  },
  data() {},
  computed: {
    shipping() {
      if (this.premium) {
        return "Free";
      }
      return 2.69;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <product :premium="premium">{{ premium }} - {{ shipping }}</product>

  <div> {{ premium }} - {{ shipping }}</div>

</div>
<!-- Changing this, it works.. -->

Leave a comment