为什么 v-for 不渲染所有对象？

Question

我正在尝试显示我从 api 获得的搜索结果。但是 v-for 不渲染所有对象？

这是我的搜索框：

如您所见，只有一项，但在 vue 开发工具中一切都是正确的：

这是 vue 组件 (v-for):

这是 dom 结果：

怎么了？

这是数据：

Answer 1

数组对象可能为 null 或空白。

Blockquote

<div class="category-list" v-for="category in categories">
    <router-link :to="{{category.name}}" class="dropdown-item">{{category.text}}</router-link>
</div>

如果您仍然遇到错误，请将数组中的对象发送给我。

Answer 2

result中的值是对象而不是数组。虽然可以使用 v-for 遍历对象，但这似乎不太可能是您想要的。您的对象具有 "0"、"1"、"2"、"3" 和 "ok" 属性。所有这 5 个都将包含在 v-for 中，这就是为什么要生成 5 个 <li> 元素的原因。

尝试将您的代码更改为以下内容，以更好地了解正在发生的事情：

<li v-for="(item, index) in result" :key="index">
    index: {{ index }}
    <br><br>
    item: {{ item }}
</li>

我建议更改您用于 result 的格式，将结果本身放入一个数组中，与 "ok" 属性分开。因此，您的服务器可能 return 类似于 {"ok": true, "results": [...]}，然后您可以取出 "results" 属性并丢弃其余的。

还有一个问题。在您的原始数据中，您的几个数据条目中有错字。属性"link;"应该叫"link"。请注意最后的额外 ;。

为什么 v-for 不渲染所有对象？

why v-for does not render all objects?

vue.js

vuejs2

v-for