Search code examples
javascriptvue.jsfor-loopv-for

Rendering a list inside another and using variables


I want to render 2 list one nested inside another but I can't use the variable of parent list inside the nested one. Where do I do the mistake here?

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

my images object,

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'}]}

Solution

  • Nesting lists is pretty straightforward in that variable names need to be unique and be sure to assign a key attribute for each:

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

    Hope this helps.