javascript - vuejs:仅为每个 x 元素创建 v-row
问题描述
我正在尝试构建一个容器,其中渲染数组中的每个第三个元素都应该在一行中。如果您单击一个元素,它应该单独消耗一行并且应该使用 12 列,而其他列应该保持其位置。请看示例图片
如果我像下面的代码那样做,它显然不能按预期工作。但是,如果认为主要问题是所有元素都在一行中。但即使我会做 v-for
里面的v-row
,我猜也是不正确的。那么,如何在 v-for 中创建一个元素,仅针对每个第三个元素?这甚至可能吗?
如果没有,还有其他方法可以实现我的目标吗?在这里使用v-if
s 似乎是不对的。
我的代码:
<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>
这是硬编码的:
<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>
解决方案
您可以尝试以下代码段:
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>