VueJS

Question

için Üst Bileşen İşlevini Çocuk Bileşenine Taşıyorum VueJS 1.0'da alıştırma yapıyorum ve Bileşenleri öğreniyorum. bu example içinde, bir input öğesi var ve bir API'den coupon veya bir tür code tedarik etmelidir. ve doğrulamak zorundayım. Benim <coupon > bileşenim var ve when-applied. when-applied, setCoupon ana işlevini çağırmalıdır, ancak olmaz.

Bu hata sadece this.whenApplied is not a function aldım.

<div id="demo" class="list-group"> 
     <script id="coupon-template" type="x-template"> 
      <input type="text" v-model="coupon" v-on:blur="whenCouponHasBeenEntered"> 
      <div v-text="text"></div> 
     </script> 
     <coupon when-applied="setCoupon"></coupon> 
    </div> 

İşte benim app.js dosya

Vue.component('coupon', { 
    template: '#coupon-template', 

    props: ['whenApplied'], 

    data: function() { 
    return { 
     coupon: '', 
     invalid: false, 
     text: '' 
    } 
    }, 


    methods: { 
    whenCouponHasBeenEntered: function() { 
     this.validate(); 
    }, 

    validate: function() { 
     if(this.coupon == 'FOOBAR') { 
     this.whenApplied(this.coupon); 
     return this.text = '20% OFF!!'; 
     } 

     return this.text = 'that coupon doesn`t exists'; 
    } 
    } 
}); 

new Vue({ 
    el: '#demo', 

    methods: { 
    setCoupon: function(coupon) { 
     alert('set coupon'+ coupon); 
    } 
    } 
}); 

Birisi lütfen yardım etmektir. Öneriler oldukça takdir ediliyor.

<coupon v-bind:when-applied="setCoupon"></coupon> 

veya v-bind için kestirme sözdizimi kullanabilirsiniz:

Answer 1

Sen mülkü bind gerektiğini

<coupon :when-applied="setCoupon"></coupon> 

propshere hakkında daha fazlasını okuyun.