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

Question

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

这是我的搜索框：

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

这是vue组件（v-for）：

这是dom结果：

怎么了？

这是数据：

Answer 1

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"属性分开的数组中。因此，您的服务器可能返回类似{"ok": true, "results": [...]}的内容，然后您可以拔出"results"属性并丢弃其余的属性。

还有另一个问题。在原始数据中，您的几个数据条目中都有一个错字。属性"link;"应该称为"link"。请注意末尾多余的;。

Answer 2

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

  

Blockquote

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

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