Flex grid - Display nested elements on the same row



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

    Capture d’écran 2020-12-25 200711.png

    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



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



  • Thanks a lot, works like a charm !

    Have a nice day


Log in to reply