时间戳

首页 > 解决方案 > 在一行而不是一列中显示 Vuetify 卡？

javascript - 在一行而不是一列中显示 Vuetify 卡？

问题描述

我正在使用 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>

基本上我试图在一行而不是一列中显示卡片。任何帮助将不胜感激。谢谢 ：）。

标签： javascripthtmlcssvue.jsvuetify.js

解决方案

您正在循环<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

推荐阅读