Passaggio della funzione padre al componente figlio in VueJS

Question

Sto facendo pratica in VueJS 1.0 e sto imparando a conoscere Componenti. in questo example, c'è un elemento input e deve fornire coupon o una sorta di code da un'API. e devo convalidare. Ho il mio componente <coupon > e ha oggetti di scena di when-applied. Lo when-applied deve chiamare la funzione genitore setCoupon ma non lo farà.

Ho ricevuto questo errore solo this.whenApplied is not a function.

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

Ecco il mio file di app.js

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); 
    } 
    } 
}); 

Qualcuno pls aiuto. I suggerimenti sono molto apprezzati.

Answer 1

Si dovrebbe bind la proprietà:

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

o si potrebbe utilizzare la sintassi scorciatoia per v-bind:

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

Leggi di più riguardo il propshere.