Vuetify search in v-autocomplete with property item-text or another property?-CodePudding

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,

CodePudding user response：

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