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>

它很可能是值得的轉換數據與計算值一個健全的數據結構和迭代計算的。