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>

其中作者只是通过上面的屏幕截图将变量分配给此JSON。

它正确地循环遍历第一个记录，但是然后在<ul>内，这第二个循环似乎不起作用，它只显示一个没有任何标题的点。当我代替{{ i.title }}只写{{ i }}时，它会向我显示：

[{“id”：“10”，“title”：“Narodowafrakcjopengtrologówamatorów”}，{“id”：“18”，“title”：“Co zsymboliką？” }，{“id”：“23”，“title”：“Onegacjapaństwa”}，{“id”：“28”，“title”：“O bibliotece”}，{“id”：“49”， “title”：“同性恋自豪”}]

我也可以像{{ i[0].title }}那样访问标题，但当然只显示第一个标题。如何完成？我想打印来自articles.records的单独列表元素中的每个标题。

Answer 1

查看你的json，这可能是因为articles并不是数组articles.records是存储数据的数组，你可以循环遍历。

这就是为什么当你使用[0]索引时它可以工作。

使用i in n.articles.records代替

有关其他详细信息，请查看vue documentation

在模板vue中循环内部循环

1 个答案: