vue.js - 是否有任何可能的方法可以在 Vuetify 的 v-autocomplete 中搜索多个属性？

Question

我有一个对象数组绑定到 v-autocomplete 的 item 属性。这是我的数据：

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

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

所以，我希望能够同时通过“文本”和“值”进行搜索。目前，我只能搜索其中之一。

Answer 1

使用自定义过滤功能来 v-autocomplete 如下

<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
     },
},

Answer 2

是的，您可以使用文档中提供的过滤器属性搜索多个属性：

  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