如何在 Vuetify 自动完成中从不同于 'value' 的键进行搜索？

Question

如何在 Vuetify 自动完成中搜索 raw 而不是 foo`？

<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'},
]

Answer 1

使用 v-autocomplete 的 item Slot 来显示你的 bar Text，但是使用 raw 作为你的 item-text，如我的例子所示：

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

Answer 2

您需要使用过滤器

创建这样的方法：

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

如何在 Vuetify 自动完成中从不同于 'value' 的键进行搜索？

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

vuetify.js