vuejs：仅为每个 x 元素创建 v-row

Question

我正在尝试构建一个容器，其中呈现的数组中的每个 3rd 元素都应该在一个 row 中。如果你点击一个元素，它应该单独消耗一行并且应该去12列，而其他列应该保持它的位置。请查看示例图片

如果我像下面的代码那样做，它显然不能按预期工作。 但是，如果认为主要问题是所有元素都在一行中。但即使我会在v-row 里面做 v-for，我猜也是不正确的。那么，如何在 v-for 中创建一个元素，仅针对每个第三个元素？这甚至可能吗？

如果没有，还有其他方法可以实现我的目标吗？在这里使用v-ifs 似乎不对。

我的代码：

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

初始状态：

如果您单击 Tiger，它应该如下所示：

这是硬编码的：

<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

你可以试试下面的 sn-p:

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>