Vue input event not capturing entire field

Question

I have a vue component that adds a search bar and search bar functionality. It contains this line:

<input class="input" type="text" placeholder="Address" v-model="searchQuery" v-on:input="(event) => this.$emit('queryChange', event)">

This captures the text in the search bar and emits it.

In my vue, this triggers my updateSearchQuery function: this.searchQuery = event.data which merely saves the users input in the searchQuery property in my vue. Everything works fine when I do this, until, I make a search and then, make another call using the same this.searchQuery data.

For example, I'm trying to filter results with the search query '956'. I enter it and this call is made: GET /users?cp=1&pp=20&se=956, just like it should. Then after the page loads, if I go to page 2 of the results, this is the call that is made to the server: GET /users?cp=2&pp=20&se=6. Instead of saving 956 as the queryStr in the the view, it only saves the most recent character entered, instead of the entire content of the serch text.

This happens every time I type in multiple characters as a search query, and then make another call to the server using the unchanged this.searchQuery variable. If my initial search query is only a single character, it works just fine.

What am I doing wrong here? How can I emit the entirety of the text in the search bar, after any change, so that I can always save the whole search query, instead of the just the most recent change?

EDIT: I've add some more code below so the data flow is easier to follow:

Here is the template and script for the search component:

<template>
  <div class="level-item">
    <div class="field has-addons">
      <div class="control">
        <input class="input" type="text" placeholder="Address" v-model.lazy="searchQuery" v-on:input="(event) => this.$emit('queryChange', event)">
      </div>
      <div class="control">
        <div class="button is-light" @click="clearInput">
                    <span class="icon is-small">
                        <i class="fa fa-times" style="color:#ffaaaa"></i>
                    </span>
        </div>
      </div>
      <div class="control">
        <button class="button is-info" @click="onSearch(searchQuery)">Search</button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Search',
    props: {onSearch: Function},
    data () {
      return {
        searchQuery: ''
      }
    },
    watch: {},
    methods: {
      clearInput () {
        this.searchQuery = ''
      }
    }
  }
</script>

the emitted queryChange event is caught and listened to in the vue page: <Search :onSearch="onSearch" v-on:queryChange="updateSearchQuery"> and this triggers the updateSearchQuery function:

updateSearchQuery (event) {
        this.searchQuery = event.data
        console.log(event.data + '  ||  event.data')
        console.log(this.searchQuery + '  ||  this.searchQuery')
      }

Theoretically, the searchQuery data in my vue should be a copy of the searchQuery data in my component, which is itself merely a copy of whatever the user has input in the search bar.

Then when I make a call to the server I'm using the value in this.searchQuery in my vue:

onSearch (search) {
   this.makeServerQuery(1, search)
},
onPaginate (page) {
   this.makeServerQuery(page, this.searchQuery)
},
makeServerQuery (page = null, search = null) {
   let queryStr = ''
   if (page !== null) {
       queryStr += '?cp=' + page + '&pp=' + this.perPage
   }
   if (this.searchQuery !== '') {
       queryStr += '&se=' + this.searchQuery
   }   .....

The on onSearch(search) function is called whenever the search button is pressed. That seems to work fine, because when the button is pressed the entire searchQuery is passed, not just the last change.

Answer 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);
    },
  },
};