Блог

Я пытаюсь создать контейнер, в котором каждый 3-й элемент в отображаемом массиве должен находиться в одной строке. Если вы нажмете на один элемент, он должен занимать только одну строку и должен занимать 12 колов, в то время как другие колы должны сохранять свое положение. Пожалуйста, посмотрите примеры фотографий

Если я сделаю это, как в моем коде ниже, очевидно, что он работает не так, как ожидалось. Однако, если подумать, главная проблема в том, что все элементы находятся в одном ряду. Но даже если бы я сделал v-for это внутри v-row , это тоже не правильно, я думаю. Итак, как мне создать элемент внутри v-для, только для каждого 3-го элемента? Возможно ли это вообще?

Если нет, есть ли другой способ достичь моей цели? Использование v-if s здесь кажется неправильным.

Мой код:

 lt;templategt;  lt;v-container fluidgt;  lt;v-rowgt;  lt;v-col  class="border"  :cols="active == index ? 12 : 4"  @click="active = index"  v-for="(animal, index) in zoo"  :key="animal.name"  gt;  {{ animal.name }}  lt;/v-colgt;  lt;/v-rowgt;  lt;/v-containergt; lt;/templategt;  lt;scriptgt; export default {  name: "Test",   components: {},  data: () =gt; ({  active: -1,  zoo: [  {  name: "Lion",  },  {  name: "Tiger",  },  {  name: "Elefant",  },  {  name: "Bear",  },  {  name: "Monkey",  },  {  name: "Snake",  },  ],  }), }; lt;/scriptgt;  lt;stylegt; .border {  border: solid black 1px; } lt;/stylegt;   

Начальное состояние:

Если вы нажмете на Tiger, он должен выглядеть так:

Что жестко закодировано это:

 lt;templategt;  lt;v-container fluidgt;  lt;v-rowgt;  lt;v-col class="border" :cols="4"gt;  {{ zoo[0].name }}  lt;/v-colgt;  lt;v-spacergt;lt;/v-spacergt;  lt;v-col class="border" :cols="4"gt;  {{ zoo[2].name }}  lt;/v-colgt;  lt;/v-rowgt;  lt;v-rowgt;  lt;v-col class="border" :cols="12"gt;  {{ zoo[1].name }}  lt;/v-colgt;  lt;/v-rowgt;  lt;v-rowgt;  lt;v-col class="border" :cols="4"gt;  {{ zoo[3].name }}  lt;/v-colgt;  lt;v-col class="border" :cols="4"gt;  {{ zoo[4].name }}  lt;/v-colgt;  lt;v-col class="border" :cols="4"gt;  {{ zoo[5].name }}  lt;/v-colgt;  lt;/v-rowgt;  lt;/v-containergt; lt;/templategt;  lt;scriptgt; export default {  name: "Test",   components: {},  data: () =gt; ({  active: -1,  zoo: [  {  name: "Lion",  },  {  name: "Tiger",  },  {  name: "Elefant",  },  {  name: "Bear",  },  {  name: "Monkey",  },  {  name: "Snake",  },  ],  }), }; lt;/scriptgt;  lt;stylegt; .border {  border: solid black 1px; } lt;/stylegt;   

Вы можете попробовать что-то вроде следующего фрагмента:

 new Vue({  el: '#demo',  data: () =gt; ({  active: -1,  zoo: [{name: "Lion"}, {name: "Tiger"}, {name: "Elefant"}, {name: "Bear"}, {name: "Monkey"}, {name: "Snake"},],  }),  methods: {  setCols(idx) {  if((idx 1)%3 gt; 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; } 

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