使用带有对象的 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,它什么也找不到,因为搜索不在键上。
最佳答案
你可以使用自定义的 filter
属性,它接受一个函数作为值:
<v-autocomplete :filter="onFilter" ...
在方法中:
methods:{
onFilter(item, queryText, itemText){
return item.Key.toLocaleLowerCase().includes(queryText.toLocaleLowerCase())
|| item.Value.toLocaleLowerCase().includes(queryText.toLocaleLowerCase())
}
}
关于javascript - Vuetify v-autocomplete 对象自定义过滤器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68160236/