How to show a property from an object inside an array in Vue data during a loop defined on the Template?

Question

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?

shutsman · Accepted Answer · 2022-03-31 12:46:16Z

1

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>

answered Mar 31, 2022 at 12:46

shutsman

2,5101 gold badge17 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to show a property from an object inside an array in Vue data during a loop defined on the Template?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related