Dynamically assign urls to cards vuejs - vue.js

Question

Ok so I created a grid with cards inside that I want to dynamically href and it's working but it's giving me an "undefined" URL path when clicking on any of the cards that showed on the page.
Ive tried using the <template v-slot:item.years="{ item }"> way but its clashing with the <v-hover v-slot:default="{ hover }">
Any help would be appreciated
<template>
<v-container>
<v-row v-for="n in 1" :key="n" no-gutters class="pa-7">
<v-col v-for="n in 6" :key="n" :cols="n === 1 ? 4 : 4">
<v-hover v-slot:default="{ hover }">
## here I am trying to dynamically href the cards so that I can assign URLs outside of the website to them
<a class="text-decoration-none" target="blank" :href="`${years.href}`">
<v-card flat tile class="d-flex">
<v-img
:src="`https://picsum.photos/500/500?image=${n * 5 + 10}`"
:lazy-src="`https://picsum.photos/10/6?image=${n * 5 + 10}`"
class="grey lighten-5"
:aspect-ratio="12/8.5"
>
<v-expand-transition>
<div
v-if="hover"
class="d-flex transition-fast-in-fast-out black darken-2 v-card--reveal display-3 white--text"
style="height: 100%;"
>View Card</div>
</v-expand-transition>
<template v-slot:placeholder>
<v-row class="fill-height ma-0" align="center" justify="center">
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
</v-row>
</template>
</v-img>
</v-card>
</a>
</v-hover>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
data: () => ({
years: [
{
href: "https://www.google.com",
text: "me",
},
{
text: "me",
href: "https://www.bing.com",
},
{
text: "twice",
href: "https://www.facebook.com",
},
],
}),
};
</script>
<style>
.v-card--reveal {
align-items: center;
bottom: 0;
justify-content: center;
opacity: 0.5;
position: absolute;
width: 100%;
}
</style>

Answer 1

You attempted to access years's href property here: :href="years.href", which gives you undefined since years is an array.
Also, you can properly layout your data to something like this:
years: [
{
text: "me",
href: "https://www.google.com",
src: "https://picsum.photos/500/500?image=1",
lazySrc: "https://picsum.photos/10/6?image=1"
},
...
]
and use it like on your html like this:
<v-row no-gutters class="pa-7">
<v-col v-for="(year, i) in years" :key="i" :cols="i === 1 ? 4 : 4">
<v-hover v-slot:default="{ hover }">
<a class="text-decoration-none" target="blank" :href="`${year.href}`">
<v-card flat tile class="d-flex">
<v-img
:src="year.src"
:lazy-src="year.lazySrc"
class="grey lighten-5"
:aspect-ratio="12/8.5"
>
<v-expand-transition>
<div
v-if="hover"
class="d-flex transition-fast-in-fast-out black darken-2 v-card--reveal display-3 white--text"
style="height: 100%;"
>View Card</div>
</v-expand-transition>
<template v-slot:placeholder>
<v-row class="fill-height ma-0" align="center" justify="center">
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
</v-row>
</template>
</v-img>
</v-card>
</a>
</v-hover>
</v-col>
</v-row>
Here is a sample demo.

Answer 2

Sorry but undefined is what you're going to get. years is an array and you're trying to access the href property of that object in the array. So in order to get the href property, you will need to iterate through the array to access those properties of the object using a v-for.