#Alternating between two divs with v-for?

3 messages · Page 1 of 1 (latest)

nocturne tree
#

I have an array of "tile data" and I am trying to achieve the following pattern:

<div class="mosaic-root">
    <div class="mosaic-tile"></div>
    <div class="mosaic-split"></div>
    <div class="mosaic-tile"></div>
    <div class="mosaic-split"></div>
    <div class="mosaic-tile"></div>
</div>

I don't want to have wrappers around one tile and split for example, since the point is to have the splits right next to two tiles. Is this achievable with v-for?

dry lantern
#

have you two arrays for "tile data" and "split data" or one array with all data?

rose turret
#

This is not really nuxt specific. It's basic vue.

Im not sure if i got you right, but:

<template>
  <div class="mosaic-root">
    <template
        v-for="(tile, index) in tiles"
        :key="index"
    >
      <div class="mosaic-tile"></div>
      <div v-if="index < tiles.length - 1" class="mosaic-split"></div>
    </template>
  </div>
</template>

Will results in

<div class="mosaic-root">
    <div class="mosaic-tile"></div>
    <div class="mosaic-split"></div>
    <div class="mosaic-tile"></div>
    <div class="mosaic-split"></div>
    ....
    <div class="mosaic-tile"></div>
</div>