Nested v-for loop with Vuejs

Question

I need a nested v-for loop in Vuejs but have doubt about how to do it, how to organize my Data and the v-for loop.

Here is the Data. I would like to be able to iterate through modifiers, without the need to call precisely modifiers1, modifiers2.

The idea is that the first v-for loop with iterate through the modifiers object, and a nested v-for loop will iterate through the different blocks inside. Like this, I have an automatic nested v-for loop.

modifiers1: {
  block1: {
    class: 'doc_button--green',
    description: 'Primary Button'
  },
  block2: {
    class: 'doc_button--orange',
    description: 'Secondary Button'
  },
  block3: {
    class: 'doc_button--red',
    description: 'Tertiary Button'
  }
},
modifiers2: {
  block1: {
    class: 'doc_button--small',
    description: 'Small Button'
  },
  block2: {
    class: 'doc_button--big',
    description: 'Big Button'
  }
}

A simple example of loop I think about is:

<div v-for="(modifier) in modifiers" :key="modifier">
 <ul v-for="(block) in blocks" :key="block">
   <li></li>
 </ul>
</div>

Is it possible, and if yes how? Do I need to organize my Data into a nested array? Thanks

Answer 1

Assuming that your data structure is stored in the variable modifiers, you would just need to adjust your second v-for to loop over the modifier variable from the first v-for.

In effect your code would become this (expanded to highlight more ways to use the data from the loops):

let modifiers = {
  modifier1: {
    block1: {
      class: 'doc_button--green',
      description: 'Primary Button'
    },
    block2: {
      class: 'doc_button--orange',
      description: 'Secondary Button'
    },
    block3: {
      class: 'doc_button--red',
      description: 'Tertiary Button'
    }
  },
  modifier2: {
    block1: {
      class: 'doc_button--small',
      description: 'Small Button'
    },
    block2: {
      class: 'doc_button--big',
      description: 'Big Button'
    }
  }
}

<div v-for="(blocks, modifier) in modifiers" :key="modifier">
  <ul v-for="(block, name) in blocks" :key="name">
    <li v-for="(value, key) in block" :key="key">{{key}}: {{value}}</li>
  </ul>
</div>

Answer 2

One way would be to create a computed property to self reference the $data...

computed:{
    myData() {
        return this.$data
    }
},

Then in the template...

<div v-for="(modifier) in myData" :key="modifier">
    <ul v-for="(block,k) in modifier" :key="k">
        <li>{{ block.description }}</li>
    </ul>
</div>

Demo

Answer 3

You could also transform the Object into an array of modifiers, each with a nested array of blocks:

const data = {
  modifiers1: {
    block1: {
      class: 'doc_button--green',
      description: 'Primary Button'
    },
    block2: {
      class: 'doc_button--orange',
      description: 'Secondary Button'
    },
    block3: {
      class: 'doc_button--red',
      description: 'Tertiary Button'
    }
  },
  modifiers2: {
    block1: {
      class: 'doc_button--small',
      description: 'Small Button'
    },
    block2: {
      class: 'doc_button--big',
      description: 'Big Button'
    }
  }
}
const modifiers = Object.keys(data).map(modifierName => ({
  name: modifierName,
  blocks: Object.keys(data[modifierName]).map(blockName => ({
    ...data[modifierName][blockName],
    name: blockName
  }))
}));


console.log(modifiers);

Then you can loop over the nested array like so:

<div v-for="(modifier) in modifiers" :key="modifier.name">
 <ul v-for="(block) in modifier.blocks" :key="block.name">
   <li></li>
 </ul>
</div>