I am working on a website that will showcase multiple cards which expand when selected. Here is the code for the card component:
<template>
<v-card
class="mx-auto"
max-width="90%"
min-height="600"
app
@click="selectCard(id)"
>
<!-- <img v-bind:src="img" /> -->
<v-img
dark
class="white--text align-end"
height="400px"
:src="require('../assets/' + img)"
:alt="`${title}`"
>
</v-img>
<v-card-title>
<p class="text-wrap">{{title}}</p>
</v-card-title>
<v-card-subtitle class="pb-0">{{taglist}}</v-card-subtitle>
<v-card-text class="text--primary">
<div>{{text}}</div>
</v-card-text>
<v-card-actions>
<v-btn
color="orange"
text
@click="selectCard(id)"
>
Read More
</v-btn>
</v-card-actions>
</v-card>
</template>
<script>
export default {
name: 'Card',
computed: {
taglist() {
let list = "";
for (let t of this.tags) {
list = list + t + ", ";
// console.log("TEST:" + (1===this.id))
}
list = list.substring(0, list.length-2);
return list;
}
},
methods: {
selectCard(id) {
this.$emit('expandCard',id)
}
},
props: {
title: String,
tags: Array,
img: String,
text: String,
id: Number,
}
}
</script>
The parent component is expected to listen and handle these interactions:
<template>
<div class="projects">
<v-main>
<v-row>
<v-col
cols="12"
sm="6"
md="4"
lg="4"
v-for="data in info"
:key="data.index"
>
<Card
:title="data.title"
:tags="data.tags"
:img="data.img"
:text="data.text"
:id="data.index"
/>
</v-col>
</v-row>
<div> {{reached}} </div>
<v-card
v-on:expandCard="showCard"
v-if="dialog">
<p> {{reached}}</p>
<v-img
dark
class="white--text align-center"
height="80%"
:src="require('../assets/' + info[id].img)"
:alt="`${info[id].title}`"
>
</v-img>
<v-card-title>
<p class="text-wrap">{{info[id].title}}</p>
</v-card-title>
<v-card-subtitle class="pb-0">{{info[id].tags}}</v-card-subtitle>
<v-card-text class="text--primary">
<div>{{info[id].text}}</div>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn text color="primary" @click="dialog = false">Return</v-btn>
</v-card-actions>
</v-card>
</v-main>
</div>
</template>
<script>
// @ is an alias to /src
import Card from '@/components/Card.vue'
export default {
name: 'Projects',
methods: {
showCard(id) {
this.dialog = true;
this.id = id
console.log(this.id)
},
reached() {
console.log("reached")
}
}
</script>
The goal is to select a card and pass its ID to the parent component to render it on top of all other cards.