Vue v-for как вывести массив?

Question

[Дмитрий Пляскин]

Есть объект state с примерно такой структурой:

state: {
  blocks: [ 
    {
      nameBlock: 'Block 1',
      items: [
        {
          nameItem: 'Item 1',
          elem: [
            {
              nameElem: 'Elem 1',
            },
            {
              nameElem: 'Elem 2',
            },
            {
              nameElem: 'Elem 3',
            }
          ]
        },
        {
          nameItem: 'Item 2',
          elem: [
            {
              nameElem: 'Elem 1',
            }
          ]
        }
      ]
    },
    {
      nameBlock: 'Block 2',
      items: [
        {
          nameItem: 'Item 1',
          elem: [
            {
              nameElem: 'Elem 1',
            }
          ]
        }
      ]
    }
  ]
}

Как сделать на vue такой вывод такой структуры?
Block 1
-- Item 1
---- Elem 1
---- Elem 2
---- Elem 3
-- Item 2
---- Elem 1
Block 2
-- Item 1
---- Elem 1

Answer 1

[Evgeny Kulakov]

<div v-for="block in blocks">
  {{block.nameBlock}}
  <div v-for="item in block.items">
    {{--item.nameItem}}
    <div v-for="elitem in item.elem">{{----elitem.nameElem}}</div>
  </div>
</div>

Comments

[Дмитрий Пляскин]

Не работает 3 цикл. Он начинает работать, если сделать так. Но работает не так как надо. Если не указать индекс, то он пишет undefined.

block = this.$store.state.blocks // -  путь

<div v-for="elitem in block.items[0].elem">{{----elitem.nameElem}}</div>

Как нибудь можно сделать так, что бы индекс автоматически проставлялся?

[Evgeny Kulakov]

Дмитрий Пляскин, поправил ответ.