Реквизит не связывается с данными родительского экземпляра

Question

У меня есть компонент "Продукт".Данные от родителя не передаются ребенку.Он остается установленным по умолчанию, введенным из основного шаблона.В зависимости от премиальной стоимости, доставка бесплатна или стоит 2,69.

Я пытался понять, используя вводные видеоролики VueMastery. Но я все еще изо всех сил, не могли бы вы объяснить, в чем проблема?

var app = new Vue({
    el: '#app',
    data: {
        premium: false // Changing the value here doesn't make any change
    }
})

Vue.component('product', {
    props: {
        premium: {
            type: Boolean,
            required: true
        }
    }, 
    template: ``,
    data() {},
    computed: {
        shipping() {
            if(this.premium) {
                return "Free";
            }
            return 2.69;
        }
    }
}

<div id="app">
    <product :premium="true"></product> // Changing this, it works..
</div

Заранее спасибо.

Answer 1

Вы можете увидеть в документации: https://vuejs.org/v2/guide/components-props.html#Passing-a-Boolean

в вашем случае вы можете попробовать это:

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

Любое изменение в «премиум» должно изменить компонент «Продукт»

Answer 2

Посмотрите здесь:)

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.. -->

Answer 3

Вам необходимо использовать data от родителя в качестве источника привязки для product.

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

Изменение data.premium в родительском элементе теперь должно распространяться на дочернего элемента.