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，它什么也没找到，因为搜索不在 Key 上。

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())

   }
}