JSFiddle - React, Tailwind, and code Playground

by Saurabh Mimani

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="app">
  <h1>
  Custom
  </h1>
  <test :input-callback="someCallback"></test>
  
  <h1>
  Fallback
  </h1>
  <test></test>
</div>

<template id="test">
  <div>
    <input v-on:input="input">
  </div>
</template>

JavaScript

Vue.component('test', {
	props: {
  	inputCallback: Function,
  },
  template: '#test',
  methods: {
  	input (event) {
    	var value = event.target.value
   		if (this.inputCallback) {
      	this.inputCallback(value)
      } else {
      	this.fallbackCallback(value)
      }
    },
    fallbackCallback (value) {
    	console.log('fallbackCallback', value)
    }
  }
})

new Vue({
	el: '#app',
  methods: {
  	someCallback (value) {
    	console.log('someCallback', value)
    },
  },
})