如何在vue 2中遍历对象数组和嵌套对象答案

【问题标题】：How to loop through an array of objects and nested object in vue 2如何在vue 2中遍历对象数组和嵌套对象
【发布时间】：2023-03-30 05:05:01
【问题描述】：

我有一个包含大量对象和嵌套对象的数组。我想在 vue 2 应用程序中使用 v-for 循环遍历数组。

这是我打印完整数组后得到的结果

[
[
{
  "id": 1,
  "title": "Dolor assumenda officiis.",
  "joke": "Esse quia non voluptas facere odio id. Aut animi vero qui corporis alias. Sunt omnis qui sunt est officia.",
  "created_at": "Jun 22, 2017",
  "creator": {
    "data": {
      "id": 1,
      "name": "Dr. Sage Braun I",
      "email": "theller@example.com",
      "joined": "Jun 22, 2017"
    }
  }
},
{
  "id": 2,
  "title": "Quod occaecati doloribus amet voluptatem.",
  "joke": "Voluptas nam harum voluptatem ipsam tempora rerum. Sunt quis nam debitis. Voluptatibus id dolor quia aut odio. Omnis saepe harum quibusdam in dolorem. Possimus voluptatem impedit sed inventore fugit omnis culpa.",
  "created_at": "Jun 22, 2017",
  "creator": {
    "data": {
      "id": 1,
      "name": "Dr. Sage Braun I",
      "email": "theller@example.com",
      "joined": "Jun 22, 2017"
    }
  }
}
]
]

这就是我尝试获取数据的方式，但它没有加载任何内容

<div class="row" v-for="u in users" >
     {{ u.id}}
 </div>

【问题讨论】：

你尝试了什么？显示到目前为止的 JS 代码。
您要循环遍历数组中的属性或项吗？
我编辑了问题请看最后一部分..

标签： javascript arrays vue.js vuejs2

【解决方案1】：

您似乎有一个嵌套数组。试试

<div class="row" v-for="u in users[0]" >
     {{ u.id}}
 </div>

【讨论】：

是的，它工作了我尝试了相同的方法，但我之前遇到了错误，但现在相同的代码工作:) 我可以使用 u.id 获取第一个对象并从我需要的创建者对象中获取 id使用 u.creator.data.id 谢谢你的时间。