0
147
ViewsHow to show a property from an object inside an array in Vue data during a loop defined on the Template?
My data structure:
data: {
OBJs: [
{ "imageUrl": "site/image1.png", "name": "name1" },
{ "imageUrl": "site/image2.png", "name": "name2" },
{ "imageUrl": "site/image3.png", "name": "name3" },
{ "imageUrl": "site/image4.png", "name": "name4" },
]
}
Then on the template
<div v-for="index in OBJs.length" :key="index">
{{OBJs[index].imageUrl}}
</div>
But I keep getting this error.
If I render just the OBJs[index] like this:
<div v-for="index in OBJs.length" :key="index">
{{OBJs[index]}}
</div>
...I get the all objects!
{ "imageUrl": "site/image1.png", "name": "name1" }
{ "imageUrl": "site/image2.png", "name": "name2" }
{ "imageUrl": "site/image3.png", "name": "name3" }
{ "imageUrl": "site/image4.png", "name": "name4" }
so how come are they undefined? Anybody able to help?
·
Juan Pablo Isaza
1 answers
Answer question0
you dont need to use length
just OBJs - then you will have item of array on each iteration
if you have structure like this:
export default {
data() {
return {
data: {
OBJs: [
{ "imageUrl": "site/image1.png", "name": "name1" },
{ "imageUrl": "site/image2.png", "name": "name2" },
{ "imageUrl": "site/image3.png", "name": "name3" },
{ "imageUrl": "site/image4.png", "name": "name4" },
]
}
};
}
};
UI:
<ul>
<li v-for="item in data.OBJs" :key="item">{{item.imageUrl}}</li>
</ul>
·
Juan Pablo Isaza
Report
Answer question