时间戳

首页 > 解决方案 > 在另一个列表中呈现列表并使用变量

javascript - 在另一个列表中呈现列表并使用变量

问题描述

我想渲染嵌套在另一个列表中的 2 个列表，但我不能在嵌套列表中使用父列表的变量。我在哪里做错了？

<v-card
        v-for="n in lengthI"
.
.
<v-card
        v-for="image in images.n"

我的图像对象，

images:{one:[{flex: 12, src:'https://i.ibb.co/mHNXycQ/Filler.png', title:'kuzey cephe'}, {flex: 6, src:'https://i.ibb.co/QYvByD3/cephe.png', title:'güney cephe'}, {flex: 6, src:'https://i.ibb.co/QYvByD3/cephe.png', title:'batı cephe'}], two:[{flex: 12, src:'https://i.ibb.co/mHNXycQ/Filler.png', title:'kuzey cephe'}, {flex: 6, src:'https://i.ibb.co/QYvByD3/cephe.png', title:'güney cephe'}, {flex: 6, src:'https://i.ibb.co/QYvByD3/cephe.png', title:'batı cephe'}], three:[{flex: 12, src:'https://i.ibb.co/mHNXycQ/Filler.png', title:'kuzey cephe'}, {flex: 6, src:'https://i.ibb.co/QYvByD3/cephe.png', title:'güney cephe'}, {flex: 6, src:'https://i.ibb.co/QYvByD3/cephe.png', title:'batı cephe'}]}

标签： javascriptvue.jsfor-loopv-for

解决方案

嵌套列表非常简单，因为变量名称需要是唯一的，并确保key为每个列表分配一个属性：

<v-card v-for="(n, i) in items" :key="'item' + i">
  <v-card v-for="(image, k) in n.images" :key="'image' + k">

     // do stuff here

  </v-card>
</v-card>

希望这可以帮助。

推荐阅读