vuejs: create v-row only for every x element

Question

Im trying to build a container, where every 3rd element in the rendered array, should be in one row. If you click on one element, it should consume one row alone and should go for 12 cols, while the other cols should maintain its position. Please see example pics

If I do it like in my code below, its obviously not working as expected. However, if think the main problem is, that all elements are in one row. But even if I would do the v-for inside the v-row, is also not correct I guess. So, how do I create a element inside a v-for, only for every 3rd element? Is this even possible?

If not, is there a other way to achive my goal? Using v-ifs here seems not to be right.

My code:

<template>
    <v-container fluid>
      <v-row>
        <v-col
          class="border"
          :cols="active == index ? 12 : 4"
          @click="active = index"
          v-for="(animal, index) in zoo"
          :key="animal.name"
        >
          {{ animal.name }}
        </v-col>
      </v-row>
    </v-container>
</template>

<script>
export default {
  name: "Test",

  components: {},
  data: () => ({
    active: -1,
    zoo: [
      {
        name: "Lion",
      },
      {
        name: "Tiger",
      },
      {
        name: "Elefant",
      },
      {
        name: "Bear",
      },
      {
        name: "Monkey",
      },
      {
        name: "Snake",
      },
    ],
  }),
};
</script>

<style>
.border {
  border: solid black 1px;
}
</style>

Initial state:

If you click on Tiger, it should look like this:

Which is hardcoded this:

<template>
    <v-container fluid>
      <v-row>
        <v-col class="border" :cols="4">
          {{ zoo[0].name }}
        </v-col>
        <v-spacer></v-spacer>
        <v-col class="border" :cols="4">
          {{ zoo[2].name }}
        </v-col>
      </v-row>
      <v-row>
        <v-col class="border" :cols="12">
          {{ zoo[1].name }}
        </v-col>
      </v-row>
      <v-row>
        <v-col class="border" :cols="4">
          {{ zoo[3].name }}
        </v-col>
       <v-col class="border" :cols="4">
          {{ zoo[4].name }}
        </v-col>
        <v-col class="border" :cols="4">
          {{ zoo[5].name }}
        </v-col>
      </v-row>
    </v-container>
</template>

<script>
export default {
  name: "Test",

  components: {},
  data: () => ({
    active: -1,
    zoo: [
      {
        name: "Lion",
      },
      {
        name: "Tiger",
      },
      {
        name: "Elefant",
      },
      {
        name: "Bear",
      },
      {
        name: "Monkey",
      },
      {
        name: "Snake",
      },
    ],
  }),
};
</script>

<style>
.border {
  border: solid black 1px;
}
</style>

Answer 1

You can try something like following snippet:

new Vue({
  el: '#demo',
    data: () => ({
    active: -1,
    zoo: [{name: "Lion"}, {name: "Tiger"}, {name: "Elefant"}, {name: "Bear"}, {name: "Monkey"}, {name: "Snake"},],
  }),
  methods: {
    setCols(idx) {
      if((idx+1)%3 > 1) {
        let temp = this.zoo[idx];
        this.zoo[idx] = this.zoo[idx+1];
        this.zoo[idx+1] = temp;
        this.active = idx+1
      } else this.active = idx
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

.border {
  border: solid black 1px;
}

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="demo">
  <v-container fluid>
    <v-row>
      <v-col
        class="border"
        :cols="active == index ? 12 : 4"
        @click="setCols(index)"
        v-for="(animal, index) in zoo"
        :key="animal.name"
      >
        {{ animal.name }}
      </v-col>
    </v-row>
  </v-container>
</div>