vue controlled input

controlled-input.jsx

export default {

  props: {
    value: {
      type: [String, Number],
      default: '',
    },
  },
  
  data() {
    return {
      currentValue: `${this.value}`
    }
  },

  watch: {
    value(val, oldVal) {
      if (val !== oldVal) {
        this.$refs.input.value = val
      }
    },
  },

  methods: {
    handleChange(e) {
      this.$emit('change', e.target.value)
    },
    handleInput(e) {
      e.preventDefault()
      let value = this.currentValue = e.target.value
      this.$refs.input.value = this.value
      this.$emit('input', value)
    },
  },

  render(h) {

    const on = {
      change: this.handleChange,
      input: this.handleInput,
    }

    const attrs = {
      on,
    }

    return (
      <input type="text" {...attrs} value={this.currentValue} ref="input"/>
    )
  }
}