无法 v-for 单个对象中的对象数组

Question

我需要一些帮助才能在 NuxtJS 中使用 v-for。

我有一个包含标签对象列表的对象，如下所示：

{
  "id": 5,
  "title": "example",
  "tags":[
  {
    "id":3,
    "name":"a",
    "description":null
  },
  {
    "id":4,
    "name":"b",
    "description":null
  }]
}

信息：这些数据通过调用 strapi API 端点（存储在情节中）的 fetch() 检索

这是进入标签的循环：

<span class="badge bg-red-500" :v-for="tag in episode.tags" :key="tag.id">
    {{tag.name}}
</span>

当我这样做时，我收到一条错误消息 Cannot read property 'name' of undefined 或 Cannot read property 'id' of undefined（这取决于我是使用标签还是 tag.id 作为键）

我需要了解为什么会收到该错误（我知道标签为空，但为什么）。另一件事，如果我写 episode.tags[0].name

，我可以访问标签

我真的需要帮助来理解为什么这个循环不起作用。如果有人能为我解决这个问题，请提前感谢所有帮助。

Answer 1

找了1个多小时，发布问题，1分钟就找到了问题...

因此，如果有人面临同样的问题，只需删除 v-for 指令之前的 :，因为它是原生 VueJS 属性。不是 HTML

无法 v-for 单个对象中的对象数组

Unable to v-for an object array in an single object

javascript

arrays

json

vue.js

nuxtjs