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

【问题标题】：Vue JS - Loop through nested object without knowing its nameVue JS - 在不知道其名称的情况下循环嵌套对象
【发布时间】：2021-07-04 16:25:43
【问题描述】：

我执行了一个 axios 调用，它返回以下（示例）：

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

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

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

【问题讨论】：

你可以使用 Object.keys(data) 然后通过 key 或者简单的 Object.values(data) 获取

标签： javascript vue.js web axios lodash

【解决方案1】：

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

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

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

你也可以这样做：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：