Блог

У меня есть массив объектов, привязанных к элементу prop v-autocomplete. это мои данные:

 products: [
   {
      text: "Apple",
      value: 209
   },
   {
      text: "Banana",
      value: 229
   }
]

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

итак, я хочу иметь возможность поиска как по «тексту», так и по «значению». В настоящее время я могу искать только один из них.

Используйте пользовательскую функцию фильтра для v-автозаполнения следующим образом

 <v-autocomplete>
   ...
   :filter="customFilter"
   :item="products"
   :search-input.sync="search"
</v-autocomplete>
 

 methods: {
     customFilter (item, queryText, itemText) {
         // return true or false according to your logic
         // i.e queryText matches with item object
     },
},
 

Да, вы можете выполнить поиск по нескольким атрибутам, используя атрибут фильтра, который указан в документах:

   customSearch(item, queryText, itemText) {
      const data = item.text.toLowerCase()   item.value.toLowerCase()
      const searchText = queryText.toLowerCase()

      return textOne.indexOf(searchText) > -1 
  }
 

и использовать в шаблоне следующим образом:

  <v-autocomplete
     spellcheck="false" 
     :filter="customSearch"
...
</v-autocomplete>
 

Обратитесь к этим документам: https://vuetifyjs.com/en/api/v-autocomplete/#props