Javascript Vuetify autocomplete是否可以有两个数组？

有两个空数据数组：水果和动物。当用户单击

v-autocomplete

时，搜索栏将以列表形式显示水果数据

[“苹果”、“香蕉”、“猕猴桃”]

。当用户键入某个内容时，水果数据将消失，并显示API中的动物数据。所以基本上有两个数据数组，但我只能向Vuetify自动完成添加一项

 <v-autocomplete 
  v-model="select" 
:items="fruits" 
:search-input.sync="search">

---

那么，在用户在输入字段中键入内容后，是否有任何方法可以更改项目数组？

您可以使用API中的搜索结果加入水果数组

假设您有一个名为

items

的数组，它将保存所有结果，还有一个名为

fruit

的数组，只保存水果。然后，当您创建组件时，您可以将

fruit

中的所有内容添加到

items

，例如

this.items=[…this.fruit]

然后，当您进行搜索并返回结果并将其放入名为

结果

的数组中时，您可以设置

项

以包含

结果

中的所有内容以及

结果

中的所有内容，例如

this.items = [...this.fruit, ...this.results]

在您返回搜索结果后，Vuetify似乎仍然应用自己的搜索功能，因此它仍然会过滤掉与您的搜索查询不匹配的

水果

你可以看看我在Codepen上做的演示