CODEWITHSUNDEEP
javascripthtmlcssvue.jsvuetify.js
Somethingwhatever
Somethingwhatever

Reputation: 1348

Display Vuetify cards in a single row instead of a column?

I am using Vuetify 1.5 and Vuetify grid system to set up my layout. Now i have a component HelloWorld which i am importing into my Parent Component. I have set up the layout in my HelloWorld and i am trying to display my cards in a single row instead having all of them show up in a column. I am not sure what i am doing wrong here.

I have setup the <v-layout align-center justify-center row fill-height class="mt-5"> which should render it in one row.

Check out this working CodeSandbox.

I am not adding my Vuex store below since the problem is in the layout and not the data itself. The store is minimal and is in the link above.

This is my HellWorld Component:-

<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>

And this is my Parent component:-

<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>

Basically i am trying to show the cards in a row instead of a column. Any help will be appreciated. Thank you :).

Upvotes: 0

Views: 1034

Answers (1)

Michael
Michael

Reputation: 5038

You are looping through <v-layout> this means you are creating a new line (layout) for each card. You need to take the layout out of the loop put in the parent and they will be more than one on one row.

Something like:

<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>

And remove from HelloWorld

Upvotes: 1

Related Questions