Отображать карточки Vuetify в одну строку вместо столбца? - PullRequest
Новая
       17

Отображать карточки Vuetify в одну строку вместо столбца?

0 голосов
/ 05 мая 2020

Я использую Vuetify 1.5 и систему сеток Vuetify для настройки своего макета. Теперь у меня есть компонент HelloWorld, который я импортирую в свой Parent Component. Я настроил макет в моем 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>

В основном я пытаюсь показать карты в строка вместо столбца. Любая помощь будет оценена по достоинству. Спасибо :).

1 Ответ

1 голос
/ 05 мая 2020

Вы просматриваете <v-layout> в цикле, это означает, что вы создаете новую строку (макет) для каждой карты. Вам нужно взять макет из l oop, помещенного в родительский, и их будет больше одного в одной строке.

Что-то вроде: 

<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

...