有两个空数据数组水果和动物。当用户单击v-autocomplete 时，搜索栏将显示水果数据["apple","banana","kiwi"] 作为列表。当用户输入某些内容时，水果数据将消失并显示 API 中的动物数据。所以基本上有两个数据数组，但我只能将一项添加到 Vuetify 自动完成中。
<v-autocomplete
v-model="select"
:items="fruits"
:search-input.sync="search">
那么有什么方法可以在用户在输入字段中输入内容后更改项目数组？
【问题讨论】：
标签： javascript vue.js vuetify.js
您可以将您的水果数组与您 API 的搜索结果相结合。
假设您有一个名为items 的数组将保存所有结果，而一个名为fruit 的数组仅用于保存水果。然后，当您创建组件时，您可以将 fruit 中的所有内容添加到 items，例如this.items = [...this.fruit].
然后，当您进行搜索并返回结果并将其放入名为 results 的数组中时，您可以将 items 设置为包含 results 中的所有内容以及 fruit 中的所有内容，例如
this.items = [...this.fruit, ...this.results]
在您返回搜索结果后，Vuetify 似乎仍会应用它自己的搜索功能，因此它仍会过滤掉与您的搜索查询不匹配的 fruit。
您可以查看我在 Codepen here 上制作的演示。
【讨论】：