D
D
Dmitry Plyaskin2018-02-26 15:13:14
Vue.js
Dmitry Plyaskin, 2018-02-26 15:13:14

Vue v-for how to output an array?

There is a state object with something like this structure:

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',
            }
          ]
        }
      ]
    }
  ]
}

How to make such an output of such a structure on vue?
Block 1
-- Item 1
---- Elem 1
---- Elem 2
---- Elem 3
-- Item 2
---- Elem 1
Block 2
-- Item 1
---- Elem 1

Answer the question

In order to leave comments, you need to log in

1 answer(s)
E
Evgeny Kulakov, 2018-02-26
@dmitryplyaskin

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

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question