如何在Vuetify 2的v-autocomplete中结合后端全文搜索？

问题原因 #

Vuetify 2的v-autocomplete默认会对绑定的items执行本地过滤逻辑。即便你已经通过后端根据搜索词query获取了匹配的结果，组件仍会用自身规则二次过滤，当搜索词与选项文本不完全匹配时，就会出现后端返回正确数据但组件不显示的情况。

简便解决方法 #

禁用组件的本地过滤功能，让它直接展示后端返回的所有items：在v-autocomplete组件中添加:filter="() => true"属性。

修改后的完整组件代码：

<v-autocomplete
  v-model="productSearchData.selected"
  outlined
  return-object
  item-value="id"
  :search-input.sync="productSearchData.query"
  :items="productSearchData.items"
  chips
  multiple
  deletable-chips
  small-chips
  dense
  cache-items
  :filter="() => true"
/>

说明 #

• 设置filter为始终返回true的函数，会完全跳过组件的本地过滤步骤，直接渲染后端返回的匹配结果。
• 由于你已经通过后端逻辑处理了搜索匹配，组件无需重复执行过滤，既解决了显示问题，也避免了不必要的性能消耗。

内容的提问来源于stack exchange，提问作者dabelo