JSFiddle - React, Tailwind, and code Playground

by Simon Herteby

HTML

<div id="vue">
<filtered-input v-model="text" :filter="filter"></filtered-input>
{{text}}
</div>

Vue

Vue.component('filtered-input', {
	props:['value', 'filter'],
  template:`
  	<input :value="filtered" @input="input">
  `,
  computed:{
  	filtered(){
    	return this.filter(this.value)
    }
  },
  methods:{
  	input(e){
    	console.log(e.target.value)
      this.$emit('input', this.filter(e.target.value))
    }
  }
	
})

new Vue({
	el:'#vue',
  data(){
  	return {
    	text:''
    }
  },
  methods:{
  	filter(str){
    	return str.toUpperCase().replace(/ /g, '_')
    }
  }
})