Vue JS - 在不知道其名称的情况下循环遍历嵌套对象

Question

我执行一个 axios 调用，其中 returns 以下（示例）：

{
   "data":{
      "xyz":[
         {
            "foo":1234,
            "baz":5678,
         }
      ]
   }
}

我的 axios 调用中有一个 .then()，我使用 lodash 将 _.cloneDeep 我的 response.data （上图）连接到我的 vue 实例中的数据属性。

在不知道名称（可以不同）的情况下，在 xyz 上执行 v-for 的正确方法是什么？或者如何直接将 xyz 克隆到我的数据属性?

Answer 1

要直接将 xyz 克隆到您的数据属性，您可以这样做（假设 response.data 包含您在问题中提供的片段：

dataPropertyInVueInstance = response.data["data"][Object.keys(response.data["data"])[0]]

这会在 response.data["data"] 处获取第一个键（在本例中为 xyz）并将数据从 response.data["data"] 中拉出，从而为您提供 [=12= 处的对象] 并避免命名问题。

你也可以这样做：

dataPropertyInVueInstance = Object.values(response.data["data"])[0]

这会获取 response.data["data"] 中第一个键的值——在本例中，是键 xyz 处的数据。

Answer 2

我很确定你可以嵌套 v-for:

<div v-for="(item,key) in data" :key="key"> 
     <div v-for="(nestedItem, nestedKey) in item)" :key="nestedKey">
         {{ nestedItem }}
     </div>
</div>

Vue JS - 在不知道其名称的情况下循环遍历嵌套对象

Vue JS - Loop through nested object without knowing its name

javascript

web

lodash

vue.js

axios