vuejs/vue

[Docs] $emit('input', value) cancels event.preventDefault()

Madyuskin opened this issue · 1 comments

What problem does this feature solve?

I believe this behavior should be mentioned in the docs.

<v-text-field
  :value="value"
  ref="textField"
  @input.native="textFieldInput"
/>
textFieldInput(event) {
  let value = event.target.value

  if (event.inputType === 'insertFromPaste') {
    event.preventDefault()

    value = value.replace(...)

    // this.$refs.textField.$refs.input.value = value
  }

  this.$emit('input', value) // Cancels the above event.preventDefault()
}

What does the proposed API look like?

Just use a different name for the event

textFieldInput(event) {
  let value = event.target.value

  if (event.inputType === 'insertFromPaste') {
    event.preventDefault()

    value = value.replace(...)

    // this.$refs.textField.$refs.input.value = value

    this.$emit('input-paste', value)
  } else {
    this.$emit('input', value)
  }
}
<CustomTextField
  v-model="value"
  @input-paste="_value => value = _value"
/>

Open a PR to https://github.com/vuejs/v2.vuejs.org with the proposal. Thanks!