title: Passing Parent Function to Child Component in VueJS
body: <p>I'm having my practice in VueJS 1.0 and I am learning about Components.
  in this <code>example</code>, there is an <code>input</code> element and has to supply <code>coupon</code> or some kind of a <code>code</code> from an API. and I have to validate. I have my <code>&lt;coupon &gt;</code> component and has props of <code>when-applied</code>. The <code>when-applied</code> must call the parent function <code>setCoupon</code> but it won't.</p>
  
  <p>I only got this error <code>this.whenApplied is not a function</code>.</p>
  
  <pre><code>    &lt;div id="demo" class="list-group"&gt;
          &lt;script id="coupon-template" type="x-template"&gt;
              &lt;input type="text" v-model="coupon" v-on:blur="whenCouponHasBeenEntered"&gt;
              &lt;div v-text="text"&gt;&lt;/div&gt;
          &lt;/script&gt;
        &lt;coupon when-applied="setCoupon"&gt;&lt;/coupon&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is my <code>app.js</code> file</p>
  
  <pre><code>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);
      }
    }
  });
  </code></pre>
  
  <p>Someone pls help. Suggestions pretty much appreciated.</p>