JSFiddle - React, Tailwind, and code Playground

by Shin Okada

HTML

<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.min.css">
<div id="root" class="container">
  <coupon @anyname="onCouponAppliedfun"></coupon>
  <h1 v-if="couponApplied">You used a coupon.</h1>
</div>

JavaScript

Vue.component('coupon', {
  template: '<input class="input" type="text" placeholder="Text input" @blur="onCouponApplied">',
  methods: {
    onCouponApplied() {
      this.$emit('anyname');
    }
  },

});

new Vue({
  el: '#root',
  methods: {
    onCouponAppliedfun() {
      this.couponApplied = true;
    }
  },
  data: {
    couponApplied: false
  }
});