I am looking to implement a nested v-for loop in Vuejs, but I am unsure about how to structure my Data and the v-for loop itself.
My goal is to iterate through modifiers without having to specify modifiers1, modifiers2 individually.
The idea is to have the first v-for loop iterate through the modifiers object, while a nested v-for loop iterates through the different blocks inside. This way, I can achieve 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'
}
}
An example of loop structure that I was considering:
<div v-for="(modifier) in modifiers" :key="modifier">
<ul v-for="(block) in blocks" :key="block">
<li></li>
</ul>
</div>
Is this possible? If so, how should I go about it? Do I need to restructure my Data into a nested array? Thank you