VueJs Loop child

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) ( документ )

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