gpt4 book ai didi

javascript - 在单行而不是列中显示 Vuetify 卡?

转载 作者:行者123 更新时间:2023-12-02 20:50:53 30 4
gpt4 key购买 nike

我正在使用 Vuetify 1.5 和 Vuetify 网格系统来设置我的布局。现在我有一个组件 HelloWorld我将其导入到我的 Parent 中成分。我已经在我的 HelloWorld 中设置了布局我试图将我的卡片显示在一行中,而不是将所有卡片显示在一列中。我不确定我在这里做错了什么。

我已经设置了<v-layout align-center justify-center row fill-height class="mt-5">这应该将其呈现为一行。

看看这个工作 CodeSandbox .

我不会添加我的 Vuex存储在下面,因为问题在于布局而不是数据本身。这家商店很小,位于上面的链接中。

这是我的HellWorld组件:-

<template>
<v-layout align-center justify-center row fill-height class="mt-5">
<v-flex xs4>
<v-card class="mx-4">
<v-img :src="src"></v-img>
<v-card-title primary-title>
<div>{{title}}</div>
</v-card-title>
</v-card>
</v-flex>
</v-layout>
</template>

<script>
export default {
name: "HelloWorld",
props: {
title: String,
src: String,
id: Number
},
data() {
return {};
}
};
</script>

这是我的父组件:-

<template>
<v-container>
<v-layout align-center justify-center row fill-height class="mt-5">
<h2>Parent Component</h2>
</v-layout>
<draggable v-model="draggableCards">
<template v-for="(tech,i) in getCardArray">
<HelloWorld :src="tech.src" :title="tech.title" :key="i"/>
</template>
</draggable>
</v-container>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import HelloWorld from "./HelloWorld";
import draggable from "vuedraggable";
export default {
components: {
draggable,
HelloWorld
},
computed: {
...mapGetters({
getCardArray: "getCardArray"
}),
draggableCards: {
get() {
return this.$store.state.cardArray;
},
set(val) {
this.$store.commit("setCardArray", val);
}
}
},
methods: {
...mapMutations({
setCardArray: "setCardArray"
})
}
};
</script>

基本上,我试图以行而不是列的方式显示卡片。任何帮助将不胜感激。谢谢你:)。

最佳答案

您正在循环<v-layout>这意味着您正在为每张卡片创建一条新线(布局)。您需要将布局从放入父级的循环中取出,它们将在一行上多个。

类似于:

<draggable v-model="draggableCards">
<v-layout>
<template v-for="(tech,i) in getCardArray">
<HelloWorld :src="tech.src" :title="tech.title" :key="i"/>
</template>
</v-layout>
</draggable>

并从 HelloWorld 中删除

关于javascript - 在单行而不是列中显示 Vuetify 卡?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61606721/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com