1👍
✅
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>
3👍
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>
0👍
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>
Source:stackexchange.com