在模板 vue 中循环内部循环

Question

我有 JSON 这样的：

我正在遍历记录和内部循环我正在尝试遍历 articles.records。我是这样做的：

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

authors 只是从上面的屏幕截图中分配给此 JSON 的变量。

它正确地循环了第一个记录，但是在 <ul> 里面，第二个循环似乎不起作用，它只显示一个没有任何标题的点。当我而不是 {{ i.title }} 只写 {{ i }} 时，它向我展示了这个：

[ { "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[0].title }} 但它当然只显示第一个。如何完成？我想在单独的列表元素中打印 articles.records 中的每个标题。

Answer 1

查看您的 json 这可能是因为 articles 不是数组 articles.records 是存储数据的数组，您可以循环访问。

这就是为什么当您使用 [0] 的索引时它起作用的原因。

改用i in n.articles.records

有关更多详细信息，请查看 vue documentation

在模板 vue 中循环内部循环

Loop inside loop within template vue

javascript

loops

vue.js

vuejs2

v-for