v-for with nested elements code example
Example 1: vuejs nested v-for
<div v-for='(obj, key, index) in secondPanelDetails'
v-bind:key='index'
class='detail-wrapper'>
<span>{{ key }}:</span>
<span v-if='Array.isArray(obj)'>
<div v-for='(el, index) in obj'
v-bind:key='index'>
{{ el }}
</div>
</span>
<span v-else>{{ obj }}</span>
</div>
Example 2: vuejs nested v-for
new Vue({
el: '#sample',
data: {
private: {
folders : [{
name : 'folder1',
checks : [
{ name : 'check1.1' },
{ name : 'check1.2' }
]
},
{
name : 'folder2',
checks : [
{ name : 'check2.1' },
{ name : 'check2.2' }
]
}
]
}
}
})
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="sample">
<div v-if = "private.folders!=null" v-for="folder in private.folders">
{{folder.name}}
<div v-for="check in folder.checks">
{{check.name}}
</div>
</div>
</div>