v-for with dynamic keys

Question

Vuejs 2非常新奇。有关于如何通过动态数据集来枚举具有动态密钥的问题？拿这个数据实例（这是从第三方 - 所以无法更改的数据 - 并缩短可读性）：

{ 
    "143": { 
    "account_id": 1, 
    "name": "Account 1", 
    "groups": [ 
     { 
     "1610": { 
      "name": "Group 1610", 
      "meetings": [ 
      { 
       "20170816": [ 
       { 
        "id": 10755, 
        "name": "Untitled" 
       } 
       ] 
      } 
      ] 
     } 
     } 
    ] 
    } 
} 

然后，我有一个.vue文件有一个模板，这样处理：

<div v-for="(account, accountKey) in accounts"> 
    <div>{{ account.name }} ({{ accountKey }})</div> 
    <div v-for="(group, groupKey) in groups"> 
     <div>{{ group.name }} ({{ groupKey }})</div> 
     <div v-for="(meeting, meetingKey) in meetings"> 
      <div>{{ meeting.name }} ({{ meetingKey }})</div> 
     </div> 
    </div> 
</div> 

这不会渲染任何东西。有几件事我需要在这里，但不知道如何在Vuejs完成。

1. 需要能够为每个记录提取密钥（因为它是标识符）。
2. 当然，需要能够访问记录中的个人数据。

任何人都遇到类似的事情可以帮助吗？

谢谢！

Answer 1

这可能是我见过的最糟糕的数据结构之一。

这是一个模板，我认为你打算工作。

<div v-for="(account, accountKey) in accounts"> 
    <div>{{ account.name }} ({{ accountKey }})</div> 
    <div v-for="group in account.groups"> 
    <div v-for="grp, grpKey in group"> 
     <div>{{ grp.name }} ({{ grpKey }})</div> 
     <div v-for="(meeting, meetingKey) in grp.meetings"> 
     <div v-for="mtg, mtgKey in meeting"> 
      <div v-for="m in mtg">{{ m.name }} ({{ mtgKey }})</div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

组是，所以你需要遍历了出来，然后在组内的每个对象再次重复该有自己的一套钥匙对象的数组。

会议是同一种东西，一个拥有自己的键的对象数组，但它会加倍，每个键值都是一个数组...必须重新迭代。

console.clear() 
 

 
new Vue({ 
 
    el: "#app", 
 
    data:{ 
 
    accounts: { 
 
     "143": { 
 
     "account_id": 1, 
 
     "name": "Account 1", 
 
     "groups": [ 
 
      { 
 
      "1610": { 
 
       "name": "Group 1610", 
 
       "meetings": [ 
 
       { 
 
        "20170816": [ 
 
        { 
 
         "id": 10755, 
 
         "name": "Untitled" 
 
        } 
 
        ] 
 
       } 
 
       ] 
 
      } 
 
      } 
 
     ] 
 
     } 
 
    } 
 
    } 
 
})

<script src="https://unpkg.com/vue@2.4.2"></script> 
 
<div id="app"> 
 
    <div v-for="(account, accountKey) in accounts"> 
 
    <div>{{ account.name }} ({{ accountKey }})</div> 
 
    <div v-for="group in account.groups"> 
 
     <div v-for="grp, grpKey in group"> 
 
     <div>{{ grp.name }} ({{ grpKey }})</div> 
 
     <div v-for="(meeting, meetingKey) in grp.meetings"> 
 
      <div v-for="mtg, mtgKey in meeting"> 
 
      <div v-for="m in mtg">{{ m.name }} ({{ mtgKey }})</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

它很可能是值得的转换数据与计算值一个健全的数据结构和迭代计算的。