是否使用属性项文本或其他属性在v-autocomplete中进行Vuetify搜索

Question

我有一个Todo列表，它是具有属性(id, title, description(的对象数组。我还想在v-autocomplete中显示title但当我搜索单词时，它很好，但我想要的是搜索description或title
例如：如果我键入编程，它将显示给我阅读书籍。

模板

<v-autocomplete
v-model="idTodo"
:items="todos"
label="search todo..."
item-value="id"
item-text="title"
/>

脚本

visitCategories: [],
todos: [
{ id: 1, title: "Read books", description: "read books related to programming" },
{
id: 2,
title: "watch tutorials",
description: "watch tutorials in many platforms like Youtube, Udemy...",
},
],
idTodo: -1,

Answer 1

解决方案是绑定一个自定义过滤器。

<v-autocomplete
v-model="idTodo"
:items="todos"
label="search todo..."
:filter="filterData"
item-value="id"
/>

然后在方法属性中定义"filterData"函数。

methods: {
filterData(item, queryText) {
return (
item.title.toLowerCase().includes(queryText.toLowerCase()) ||  
item.description.toLowerCase().includes(queryText.toLowerCase())
);
}
}