настройка v-автозаполнения с функцией поиска

Question

При попытке настроить v-autocomplete без наблюдателя поток будет:

1. Введите строку, значение принимается функцией
2. Функция ищет в api строку и возвращает список
3. Список помещается в «записи»
4. Пересчитанное свойство "tagsFound" переоценивается.
5. Отображаются «tagsFound» (так как они :items) Основное различие между документами здесь и моим кодом состоит в моей попытке сделать это без наблюдателя, а с помощью простой функции. Соответствующий код:

<v-autocomplete
          v-model="newTag"
          :items="tagsFound"
          :loading="loading"
          :search-input.sync="search"
          color="white"
          hide-no-data
          hide-selected
          :placeholder="$t('search_terms.new_tag')"
        ></v-autocomplete>
    ...
    data() {
      return {
        newTag: '',
        entries: [],
    ....
    methods: {
    ...
     async search(term){
        this.query.term = term
        this.entries = await this.searchTerms(this.query)
      },
    ...
    computed: {
      tagsFound(){
        return this.entries
      }
    }

Ожидаемое поведение - поиск введенного термина и отображение результатов в виде раскрывающегося списка. Фактическое поведение заключается в том, что он не ищет и, следовательно, ничего не отображает.

Answer 1

Модификатор sync эффективно заставляет реквизит вести себя как v-model, так что, как и в v-model, есть реквизит и событие. Значение должно быть свойством, а не методом, поэтому :search-input.sync="search" не имеет смысла, если search является методом.

Вычисленное свойство tagsFound в вашем примере ничего не делает. Если вы просто собираетесь вернуть entries, вы можете просто использовать entries прямо в вашем шаблоне.

Не уверен, почему вы захотите сделать это без watch, но это можно сделать, либо разделив search-input.sync на пару проп / событие, либо используя вычисляемое свойство с геттером и сеттером. В приведенном ниже примере используется последний подход.

function fakeServer (search) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([
        'Red', 'Yellow', 'Green', 'Brown', 'Blue', 'Pink', 'Black'
      ].filter(c => c.toLowerCase().includes(search.toLowerCase())))
    }, 1000)
  }) 
}

new Vue({
  el: '#app',

  data () {
    return {
      newTag: '',
      entries: [],
      queryTerm: ''
    }
  },

  computed: {
    search: {
      get () {
        return this.queryTerm
      },
      
      set (searchInput) {
        if (this.queryTerm !== searchInput) {
          this.queryTerm = searchInput
          this.loadEntries()
        }
      }
    }
  },
  
  created () {
    this.loadEntries()
  },

  methods: {
    async loadEntries () {
      this.entries = await fakeServer(this.queryTerm || '')
    }
  }
})

<link href="https://unpkg.com/vuetify@1.5.16/dist/vuetify.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@1.5.16/dist/vuetify.js"></script>
<div id="app">
  <v-app>
    <v-autocomplete
      v-model="newTag"
      :items="entries"
      :search-input.sync="search"
    ></v-autocomplete>
  </v-app>
</div>

Answer 2

В этой части вы связываете search-input с методом async, это неправильно. Вам необходимо привязать search-input к полю данных и создать над ним наблюдение.

<v-autocomplete
          :search-input.sync="search"
></v-autocomplete>

Определите свой компонент, как показано ниже:

data: function(){
   return {
        newTag: '',
        entries: [],
        searchInput: null     
   }
},
watch: {
    searchInput(val){
        this.entries = await this.searchTerms(val)
    } 
}

И v-автозаполнение шаблона:

<v-autocomplete
          v-model="newTag"
          :items="tagsFound"
          :loading="loading"
          :search-input.sync="searchInput"
          color="white"
          hide-no-data
          hide-selected
          :placeholder="$t('search_terms.new_tag')"
        ></v-autocomplete>

Это рабочий пример Я создал на CodePen