Loop inside loop within template vue

Question

I have JSON like this:

I'm iterating over records and inside loop I'm trying to iterate over articles.records. I'm doin it like this:

<div class="authors__container">
    <b-row class="record"
           v-for="n in authors"
           :key="n.id">
        <b-col sm="3"
               :class=" { 'order-2': n.id % 2 !== 0 } ">
            <img :src="n.image_link" class="author__image" alt="">
        </b-col>
        <b-col sm="9" class="order-1">
            <div class="h2-heading authors__name text-center">
                <h3>
                    {{ n.name }}
                </h3>
            </div>
            <div>
                <b-tabs>
                    <b-tab title="O mnie">
                        <p>
                            {{ n.description }}
                        </p>
                    </b-tab>
                    <b-tab title="Moje artykuły">
                        <ul>
                            <li v-for="i in n.articles" :key="i.id">
                                {{ i.title }}
                            </li>
                        </ul>
                    </b-tab>
                </b-tabs>
            </div>
        </b-col>
    </b-row>
</div>

Where authors is just variable assigned to this JSON from screenshot above.

It is correctly looping over first records but then inside <ul> this second loop doesn't seems to work, it only show me one dot without any title. When I instead of {{ i.title }} write only {{ i }} it is showing me this:

[ { "id": "10", "title": "Narodowa frakcja teatrologów amatorów" }, { "id": "18", "title": "Co z symboliką?" }, { "id": "23", "title": "O negacji państwa" }, { "id": "28", "title": "O bibliotece" }, { "id": "49", "title": "Gay pride" } ]

I'm also able to access title like this {{ i[0].title }} but then it show only first one of course. How to make it done? I want to print every title from articles.records in separate list element.

tony19 · Accepted Answer · 2022-07-16 01:27:22Z

1

Looking at your json this is possibly because articles isn't the array articles.records is the array where your data is stored that you will be able to loop over.

This is why when you use the index of [0] it works.

use i in n.articles.records instead

for additional details check out the vue documentation

edited Jul 16, 2022 at 1:27

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 22, 2018 at 15:28

Charles Barnes

1081 silver badge8 bronze badges

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

Collectives™ on Stack Overflow

Loop inside loop within template vue

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