Цикл внутри цикла в шаблоне vue

У меня JSON такой:

json

Я перебираю записи, а внутри цикла пытаюсь перебирать статьи.записи. Я делаю это так:

<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>

Где авторы — это просто переменная, назначенная этому JSON на скриншоте выше.

Он правильно зацикливается на первых записях, но затем внутри <ul> этот второй цикл, кажется, не работает, он показывает мне только одну точку без какого-либо заголовка. Когда я вместо {{ i.title }} пишу только {{ i }} мне показывает это:

[ { "id": "10", "title": "Народная фракция театрального любителя" }, { "id": "18", "title": "Co z symboliką?" }, { "id": "23", "title": "O negacji państwa" }, { "id": "28", "title": "O bibliotece" }, { "id": "49", "title": "Гей-прайд" } ]

Я также могу получить доступ к заголовку, подобному этому {{ i[0].title }}, но тогда он, конечно, показывает только первый. Как это сделать? Я хочу напечатать каждый заголовок из article.records в отдельном элементе списка.


person BT101    schedule 22.02.2018    source источник


Ответы (1)


Глядя на ваш json, возможно, это связано с тем, что articles не является массивом, а articles.records - это массив, в котором хранятся ваши данные, которые вы сможете перебирать.

Вот почему, когда вы используете индекс [0], он работает.

вместо этого используйте i in n.articles.records

дополнительные сведения см. в документации vue.

person Charles Barnes    schedule 22.02.2018