javascript - vuejs - vuetify

Pasando la función principal al componente secundario en VueJS

Question

Tengo mi práctica en VueJS 1.0 y estoy aprendiendo sobre los componentes. en este example , hay un elemento de input y tiene que proporcionar un coupon o algún tipo de code desde una API. Y tengo que validar. Tengo mi componente <coupon > y tengo accesorios de when-applied . when-applied debe llamar a la función principal setCoupon pero no lo hará.

Solo recibí este error 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>

Aquí está mi archivo 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);
}
}
});

Alguien por favor ayuda. Sugerencias bastante apreciadas.

Answer 1

Debes bind la propiedad:

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

o podrías usar la sintaxis abreviada para v-bind :

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

Lea más sobre los props here .