Flex grid - Display nested elements on the same row

[ViM]

Hi,
I’m struggling to get three nested divs displayed in three columns (on the same row) in a flex grid.

The following divs :

    <div class="row">
      <div class="col-4">
        <p v-for="x in y">Level 1</p>
          <div class="col-4" >
            <p v-for="w in x">Level 2</p>
              <div class="col-4">
                <p v-for="v in w">Level 3</p>
              </div>
          </div>
        </div>
      </div>

should be displayed like this :

I can’t get rid of the nesting because of v-for (present on each level).

Any thought on how to get it work ?

Thanks a lot

[Ilia]

@ViM I would really suggest to unfold your array to the flat one, but given the circumstances, that’s probably the one you would need:

  <div v-for="(x, xi) in y" :key="xi">
    <div v-for="(w, wi) in x" :key="wi">
      <div v-for="(v, vi) in w" :key="vi" class="row q-col-gutter-x-sm">
        <div class="col-4">
          <p class="bg-amber-2 text-center">Level 1 x{{xi + 1}}</p>
        </div>
        <div class="col-4">
          <p class="bg-amber-2 text-center">Level 2 w{{wi + 1 + xi * 2}}</p>
        </div>
        <div class="col-4">
          <p class="bg-amber-2 text-center">Level 3 v{{v}}</p>
        </div>
      </div>
    </div>
  </div>

https://codepen.io/cobanja/pen/abmVLKP?editors=1010

[ViM]

Thanks a lot, works like a charm !

Have a nice day