How to autocomplete with dynamic loading in Vue?

Question

Vue.js

There is a back-end on Go and a front-end on Vue (+Vuetify). It is necessary to make an autocomplete for addresses of the dadata type.
I'm new to JS and looking for something that fits with a minimum of rework. I did not find a ready-made solution, but I found a similar question and it seems like even an answer to it on github - https://github.com/vuetifyjs/vuetify/issues/835#is...

<template>
  <v-select
    v-model="state"
    label="Select"
    :items="states"
    @input.native="loadStates"
    autocomplete
  ></v-select>
</template>

<script>
import debounce from 'debounce'

export default {
  data () {
    return {
      state: null,
      states: []
    }
  },
  methods: {
    loadStates: debounce((event) => {
      if (event.target.value.length > 2) {
        axios.get(`/api/states?q=${event.target.value}`).then(({ data }) => {
          this.states = data
        })
      }
    }, 200)
  }
}
</script>

I tried to repeat, there are no errors, but for some reason no requests go. Most likely I do not understand something. Do not tell me what I'm missing?

Answer 1

The solution turned out to be:

loadStates: function () {
  debounce((function (_this, event) {
    if (event.target.value.length > 2) {
      _this.$http.post('/api/states', {name: event.target.value}).then(response => {
        this.states = response.body
      }, response => {
        console.log(response.body.message)
      })
    }
  })(this, event), 200)
}

Answer 2

A good option is vue-multiselect , we use it on the project It is
well customizable, just fasten the search from the server to @search-change=""