Currently, I am utilizing Vuetify 1.5 along with the Vuetify grid system to establish my layout structure. Within this setup, I have a component called HelloWorld that I am importing into my Parent Component. The challenge I am facing is that despite setting up the layout in the HelloWorld component, all of the cards are appearing in a column instead of displaying in a single row. I am uncertain where I might be going wrong in this configuration.
In an attempt to render the cards in a single row, I have configured the
<v-layout align-center justify-center row fill-height class="mt-5">You can view the functional example on CodeSandbox.
I have excluded my Vuex store information below as the issue lies within the layout rather than the data itself. For reference, the minimal Vuex store details can be accessed through the provided link above.
This snippet showcases 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>
Furthermore, here is my Parent component snippet:
<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>
In essence, my objective is to showcase the cards in a row format rather than a column arrangement. Any assistance or insights regarding this matter would be greatly appreciated. Thank you! :)