Nuxt•4mo ago

Alternating between two divs with v-for?

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>

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

3 Replies

ვახო წერეთელი•4mo ago

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

Mähh•4mo ago

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>

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

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

xibman•4mo ago

Use index and modulo to achieve this https://www.freecodecamp.org/news/javascript-modulo-operator-how-to-use-the-modulus-in-js/

freeCodeCamp.org

JavaScript Modulo Operator – How to Use the Modulus in JS

In JavaScript, you may need to perform mathematical calculations such as determining if a number is even or odd, wrapping values within a range, and converting between degrees and radians in trigonometry. To help you perform all these mathematical calculations, the modulo operator can be extremely useful. This article will

Gaming

Programming

Alternating between two divs with v-for?