Как сделать автокомплит с динамической подгрузкой на Vue?

Question

[Павел Т]

Имеется back-end на Go и front-end на Vue (+Vuetify). Необходимо сделать автокомплит для адресов по типу dadata.

Я новичок в JS и ищу что-то подходящее с минимумом переделок. Готового решения не нашел, но нашел подобный вопрос и вроде как даже ответ к нему на гитхабе - 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>

Попробовал повторить, ошибок нет, но что-то никакие запросы не идут. Скорее всего я чего-то не понимаю. Не подскажите что я упускаю?

Comments

[Максим Усиков]

Какая версия vuetify?

[Vuetify] '<v-select autocomplete>' is deprecated, use '<v-autocomplete>' instead

Смотрите официальный пример v-autocomplete (vuetify, github)

Answer 1

[Павел Т]

Решение оказалось таким:

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

[Александр Новиков]

Неплохой вариант vue-multiselect, на проекте его используем
Хорошо кастомизируется, поиск с сервера прикрутить просто на @search-change=""

Comments

[Павел Т]

Спасибо за ответ. Получилось доработать этот код и этого оказалось достаточно в данном случае.