JSFiddle - React, Tailwind, and code Playground

by El_Matella

HTML

<div id="app">
  <text-field :value="number" @input="update"></text-field>
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
  	number: 1
  },
  methods: {
  	update (value) {
    	console.log(value)
    	this.number = parseInt(value.replace(/\D/g, ''))
    }
  },
  components: {
  	TextField: {
    	template: '<div><input type="text" v-model="copy"></div>',
      props: ['value'],
      data () {
      	return {
        	copy: null
        }
      },
      created () {
      	this.copy = this.value.toString()
      },
      watch: {
      	value () {
        	this.copy = this.value.toString()
        },
        copy () {
        	this.$emit('input', this.copy)
        }
      }
    }
  }
})