VueJs Loop子级

Question

我正在寻找一种使用索引访问子数据的方法。任何其他用于预期输出的方法（如下）也可以。

数据：

{
    "one": [
        {
            "uuid": "e7a38eb5-0603-4b67-9eca-7a3ef4406e58",
            "name": "One Name One",
            "label": "One Label"
        },
        {
            "id": "d782cb9f-f631-410e-9b41-5f3bdc3290df",
            "name": "One Name Two",
            "label": "One Label"
            }
        ],
        "two": [
        {
            "uuid": "c7f9c05e-367b-11e9-b4b6-ba15467d0c9d",
            "name": "Two Name Two",
            "label": "Two Label"
        }
    ]
}

脚本：

  <div v-for="(wrapper, key, index) in collections">
    <div>{{ collections[index][0]label }}</div> <---------- IN HERE !
    <div v-for="collection in collections">
      <div>{{collection.name}}</div>
    </div>
  </div>

我的预期输出：

• 一个标签
• 一个名字一个
• 一个名字两个
• 两个标签
• 两个名字一个
• 两个名字两个

Answer 1

您可以使用(value, key)（document）遍历对象

<div v-for="(key, list) in collections">
  <div> {{ list[0].label }}</div>
  <div v-for="item in list">
    <div>{{item.name}}</div>
  </div>
</div>

或更好的方法

<div v-for="(key, list) in collections" :key="key">
  <div v-for="(item, index) in list" :key="index">
    <div v-if="index === 0"> {{ item.label }}</div>
    <div>{{item.name}}</div>
  </div>
</div>