CODEWITHSUNDEEP
vuetify.js
DevonDahon
DevonDahon

Reputation: 8350

How to search from a different key than 'value' in Vuetify Autocomplete?

How to search in raw instead of foo` in Vuetify Autocomplete ?

<v-autocomplete
  v-model="myvar"
  :items="myitems"
  item-value="foo"
  item-text="bar"
/>

myitems: [
  {'foo':'aaa', 'bar':'123', 'raw':'hello world'},
  {'foo':'bbb', 'bar':'456', 'raw':'good morning'},
]

Upvotes: 0

Views: 186

Answers (2)

Santiago
Santiago

Reputation: 66

you need to use a filter

create a method like this:

filterValues(item, queryText) {
  const searchText = queryText.toLowerCase();
  const fields = [item.someValue, item.someOtherValue];
  return fields.some(
    f => f != null && f.toLowerCase().includes(searchText)
  );
}

Upvotes: 1

Zero
Zero

Reputation: 133

Use the item Slot of v-autocomplete to display your bar Text, but use raw for your item-text as shown in my example:

<v-autocomplete
    v-model="myvar"
    :items="myitems"
    item-value="foo"
    item-text="raw"
>
    <template slot="item" slot-scope="{item}">
       {{item.bar}}
    </template>
</v-autocomplete>

Upvotes: 0

Related Questions