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中完成。

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

任何人都会遇到类似的东西可以提供帮助吗？

谢谢！

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>

组是一组对象，它们有自己的一组键，因此你需要迭代它，然后再次遍历组内的每个对象。

会议是一种相同的事情，一个具有自己的键的对象数组，但它会翻倍，每个键值都是一个......必须再次迭代的数组。

＆＃13;

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"
                    }
                  ]
                }
              ]
            }
          }
        ]
      }
    }
  }
})

＆＃13;

<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>

＆＃13;

将数据转换为具有计算值的合理数据结构并迭代计算值可能是值得的。

带有动态密钥的v-for

1 个答案: