Vuetify v-autocomplete 对象自定义过滤器

Question

对一个对象使用 vuetify v-autocomplete，该对象是一个 Key 和 Value。当用户搜索时，搜索是基于item-text。正如您在我的示例中看到的那样，我显示了对象键和值示例 {1200-Chloride Systems}。那么，当用户键入时，搜索是否可能同时基于对象的键和值而不仅仅是项目文本？

                <v-autocomplete
                  label="Trading Partner"
                  v-model="tradingPartner"
                  :items="tradingpartners"
                  item-value="Key"
                  item-text="Value"
                  return-object
                >
                  <template slot="selection" slot-scope="{ item }">
                    {{ item.Key }} - {{ item.Value }}
                  </template>
                  <template slot="item" slot-scope="{ item }">
                    {{ item.Key }} - {{ item.Value }}
                  </template>
                </v-autocomplete>

在下面的示例中，您可以看到 1200 是键，Chloride Systems 是值。显示连接键 - 值。如果我清除文本并开始键入，我可以搜索名称（值），但如果我键入示例 1200，它什么也找不到，因为搜索不在键上。

Answer 1

您可以使用自定义的 filter 属性，它将函数作为值：

<v-autocomplete :filter="onFilter" ...

在方法中：

methods:{
   onFilter(item, queryText, itemText){
        return item.Key.toLocaleLowerCase().includes(queryText.toLocaleLowerCase())
               ||  item.Value.toLocaleLowerCase().includes(queryText.toLocaleLowerCase())

   }
}

Vuetify v-autocomplete 对象自定义过滤器

Vuetify v-autocomplete object custom filter

html

javascript

vue.js

vuetify.js