Javascript 在模板vue中循环内部循环
我有这样的JSON:Javascript 在模板vue中循环内部循环,javascript,loops,vue.js,vuejs2,v-for,Javascript,Loops,Vue.js,Vuejs2,V For,我有这样的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
<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>
我在迭代记录,在循环中我试图迭代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>
{{n.name}
{{n.description}}
-
{{i.title}}
其中authors只是上面屏幕截图中分配给这个JSON的变量
它正确地在第一个记录上循环,但在
内部,第二个循环似乎不起作用,它只显示一个点,没有任何标题。当我代替{{I.title}}
只写{{I}}
时,它向我显示:
[{“id”:“10”,“title”:“Narodowa frakcja teatrologów amatorów”},{“id”:“18”,“title”:“Co z symboliką?”},{“id”:“23”,“title”:“O negacji państwa”},{“id”:“28”,“title”:“O libraotece”},{“id”:“49”,“title”:“同志骄傲”}]
我也可以像这样访问标题
{{I[0].title}}
,但它当然只显示第一个标题。如何做到这一点?我想在单独的列表元素中打印articles.records中的每个标题。查看json这可能是因为articles
不是数组articles。records
是存储数据的数组,您可以在其中循环
这就是为什么当您使用[0]
的索引时它会工作的原因
在n.articles.records中使用i
有关更多详细信息,请查看