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 .