0
181
Viewsiteration trough the nested array with v-for
I have a question regarding v-for. I have an object like below:
and in dev console it look likes that:
now my question is, how can I iterate through the each array and also the array inside the main array with v-for. I tried this solution but it didn't work.
thanks in advance!
·
Juan Pablo Isaza
1 answers
Answer question0
Demo :
new Vue({
el:"#app",
data:{
items: [{
messageSettings: [{
userOne: '1',
userTwo: '2'
}],
profile: [{
freelancerAbout: 'about1',
freelancerName: 'name1'
}],
messages: [{
id: 1,
name: 'message1'
}]
}]
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="item in items" :key="item">
<p v-for="msgSetting in item.messageSettings" :key="msgSetting">
<span>UserOne: {{ msgSetting.userOne }}</span><br>
<span>UserTwo: {{ msgSetting.userTwo }}</span>
</p>
<p v-for="profile in item.profile" :key="profile">
<span>freelancerName: {{ profile.freelancerAbout }}</span><br>
<span>freelancerName: {{ profile.freelancerName }}</span>
</p>
</div>
</div>
·
Juan Pablo Isaza
Report
Answer question