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

Question

将 vuetify v-autocomplete 与对象一起使用，该对象是一个 Key 和 Value。当用户搜索时，搜索是基于项目文本的。正如您在我的示例中看到的，我显示了对象键和值示例 {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

您可以使用自定义filterprop，它将函数作为值：

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

在方法中：

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

   }
}