如何从 Vue 中的 api 调用动态呈现数组？

【问题标题】：如何从 Vue 中的 api 调用动态呈现数组？(How do I dynamically render an array from an api call in Vue?)
【发布时间】：2022-07-15 10:51:33
【问题描述】：

我正在尝试在 vue 中创建一个自动完成下拉菜单，但无法获得要在页面上呈现的 api 响应。我正在对输入中的每个按键进行 api 调用。您可以在 handleOnChange 方法中看到，我正在尝试将响应设置为绑定到上面 list 的 results 变量。

当我在进行 api 调用并将其设置为数据绑定变量后立即对结果进行控制台记录时，它会记录下来，就好像一切正常。但是，它不会在屏幕上呈现实际数据。

这是我的代码

您可能需要使用 Vue.set ，这可能会有所帮助。
我不确定如何在这种情况下使用它。看起来 Vue.set 允许您添加或替换类似于 Array.push() 的数组中的项目。我正在尝试将整个响应分配给结果变量。 Vue.set 有可能吗？
我让它工作了。我使用了 Vue.set ，但不得不将结果值更改为 {data: []} ，然后像这样使用 Vue.set Vue.set(results, "data", response.result)

【解决方案1】：

正如 cmets 中所讨论的， Vue.set 能够做到。
见文档： https://v2.vuejs.org/v2/api/#Vue-set

参数是：

它将 target[propertyName/index] 处的值替换为 value 并强制对值进行响应。

在你的情况下应该是这个而不是 this.results = response.result; :

Vue.set(this, "results", response.result);