On v-for return nested array that is inside another array - VUE 3

Question

I was looking around for a solution, but I don't get this working. So this is my structure in the graph query:

[
    {
        "titleGallery": "My title",
        "yearGallery": {
            "year": "2021",
            "id": "49620627"
        },
        "tags": [
            {
                "id": "49700910",
                "tag": "Photo"
            }
        ],
        "submitImages": [
            {
                "url": "https://website.com/53092/1627489520-m200820fine.jpg",
                "title": null,
                "alt": null
            },
            {
                "url": "https://website.com/53092/1627637821-m201439fine.jpeg",
                "title": null,
                "alt": null
            },
            {
                "url": "https://website.com/53092/1627633569-610268c72ec480634b8340ccm200633fine.jpeg",
                "title": null,
                "alt": null
            }
        ],
        "descriptionGallery": "My second title",
        "id": "50404979",
        "event": {
            "id": "49621559",
            "categoryName": "Category name"
        }
    }

]

So basically I want to have access to the array submitImages, so I can get the url in a v-for component. This is what I already try:

<tumb-img
v-for="(image,index) in imgGallery.submitImages"
:key="index"
:imageURL="image.url"></tumb-img>

So first trying direct access to the object imgGallery (which is a getter, and it is working...just in case). The other thing that I tried was to get the access with a computed instead like this

<tumb-img
v-for="image in getImgUrl"
:key="image.id"
:imageURL="image.url"></tumb-img>

the computed

  getImgUrl(){
      return this.imgGallery && this.imgGallery.submitImages
    }

but certainly there is something wrong or missing here, because it's not working :) . Thank you in advance for your help

*** UPDATE ******

I also tried this, with 2 v-for, but also it's not working, I get message submitImages, was accessed during render but is not defined on instance. But maybe because I shouldn't be using directly there, the submitImages?

<div v-for="gallery in imgGallery" :key="gallery.id" >

<tumb-img
v-for="image in submitImages"
:key="image.id"
:imageURL="image.url"> 
</tumb-img>
</div>

Does imgGallery refer to the first object in your array, or the actual array itself? — Terry
– Terry, Commented Aug 2, 2021 at 12:44
Then imgGallery returns an array, and you cannot access submitImages using dot notation since it is not an object. use this.imgGallery[0].submitImages instead, but this will only give you the submit images from the first nested object in your array. — Terry
– Terry, Commented Aug 2, 2021 at 12:49
Hello Terry, thank you for your response, what you mentioned I know, but in this case I need to pull a serie of urls for a gallery, not one by one. — druj_nasu
– druj_nasu, Commented Aug 2, 2021 at 12:58

druj_nasu · Accepted Answer · 2021-08-02 14:36:58Z

1

So I was close in my last update, and I did manage to pull the info, so using two "v-for" and it looks like this:

<div v-for="gallery in imgGallery" :key="gallery.id" >
<tumb-img
v-for="image in gallery.submitImages"
:key="image.id"
:imageURL="image.url"> 
</tumb-img>
</div>

answered Aug 2, 2021 at 14:36

druj_nasu

16112 bronze badges

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

Collectives™ on Stack Overflow

On v-for return nested array that is inside another array - VUE 3

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