Currently utilizing Vuetify's v-card, I am looking to add click functionality by using the "to" property. Although it works well, there is an issue when incorporating a menu on the top-right side of the card. Clicking on the menu counts as clicking on the v-card itself, triggering unintended actions.
I have attempted placing the image and text within a v-btn, but it brings along unwanted CSS styles. Another approach involved nesting the image and text in a div with router-link, yet the left side of the menu button remains unclickable.
Is there a built-in solution to address this particular problem?
Below is the template code for the component:
<v-card :to="'/' + card.name + '/launch'" exact tile>
<v-card-actions>
<v-menu auto offset-y>
<template v-slot:activator="{ on }">
<v-btn icon v-on="on">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(item, i) in card.menuItems"
:key="i" @click="item.action">
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.text }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-menu>
</v-card-actions>
<v-img :src="card.image" class="mx-auto" width="72"></v-img>
<v-card-title class="pb-0 mb-3 justify-center" style="font-family:'Google Sans',Roboto,sans-serif; line-height:1.1;">{{ card.title }}</v-card-title>
<v-card-text class="text--secondary rtl">{{ card.content }}</v-card-text>
</v-card>
Any assistance on this matter would be greatly appreciated!