Passing Parent Function to Child Component in VueJS

I’m having my practice in VueJS 1.0 and I am learning about Components.
in this example, there is an input element and has to supply coupon or some kind of a code from an API. and I have to validate. I have my <coupon > component and has props of when-applied. The when-applied must call the parent function setCoupon but it won’t.

I only got this 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>
      <coupon when-applied="setCoupon"></coupon>

Here is my app.js file

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

  props: ['whenApplied'],

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

  methods: {
    whenCouponHasBeenEntered: function() {

    validate: function() {
      if( == 'FOOBAR') {
        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);

Someone pls help. Suggestions pretty much appreciated.

You should bind the property:

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

or you could use the shorthand syntax for v-bind:

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

Read more about the props here.

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
Read More:   Highcharts - how to have a chart with dynamic height?

Similar Posts