I've a Todo list which is an array of objects with properities (id, title, description) Also I want to display title in v-autocomplete but when I do search for word it's fine, but what I want is Doing search for description or title.
For Example: if I type programming, it will display to me Read books.
Template
<v-autocomplete
v-model="idTodo"
:items="todos"
label="search todo..."
item-value="id"
item-text="title"
/>
Script
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,
Solution is to bind a custom filter.
<v-autocomplete
v-model="idTodo"
:items="todos"
label="search todo..."
:filter="filterData"
item-value="id"
/>
And then define the 'filterData' function in methods properties.
methods: {
filterData(item, queryText) {
return (
item.title.toLowerCase().includes(queryText.toLowerCase()) ||
item.description.toLowerCase().includes(queryText.toLowerCase())
);
}
}