[Vuejs]-Vue input event not capturing entire field

by

1👍

✅

An input event’s data value appears to be the last typed character, and not the current value of the input. A simple fix is:

@input="$emit('queryChange', searchQuery)"

This works because the model will always be updated before the input event handler runs.

Here’s a complete working component example:

<input
  v-model="searchQuery"
  type="text"
  placeholder="Address"
  @input="onInput"
/>

export default {
  data() {
    return { searchQuery: '' };
  },
  methods: {
    onInput() {
      console.log(this.searchQuery);
      this.$emit('queryChange', this.searchQuery);
    },
  },
};
👤David Weldon

Leave a comment