clickable v-card with excluded area for the v-menu

Question

I'm using the v-card of Vuetify. I want to make the card clickable so I used the "to" property. It works pretty well. the problem is when I add the menu on the top-right side. When I click on the menu of the card it counts it as I clicked on the v-card which runs other things.

I tried to put the image and text in v-btn but all the other CSS it takes with it is not a real solution. I also tried to have the image and text in div with router-link but the left side of the menu button is not clickable.

Does the infrastructure have a solution for something like this?

Here is the template of 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>

Thanks in advance!!

Zim Answer below. Related: sitepoint.com/event-bubbling-javascript. & javascript.info/bubbling-and-capturing — Ezra Siton

Zim Zim · Accepted Answer · 2020-03-23T15:10:54

You can use the stop event modifier on the menu @click item action, and .prevent on the menu btn...

      <v-card :to="'/launch'" exact tile>
            <v-card-actions>
                <v-menu auto offset-y>
                    <template v-slot:activator="{ on }">
                        <v-btn icon v-on="on" v-on:click.prevent>
                            <v-icon>mdi-dots-vertical</v-icon>
                        </v-btn>
                    </template>
                    <v-list>
                        <v-list-item v-for="(item, i) in items" :key="i" @click.stop="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="//placehold.it/200" 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;">Title</v-card-title>
            <v-card-text class="text--secondary rtl">Card text...</v-card-text>
       </v-card>

https://codeply.com/p/viy24oqC2j

clickable v-card with excluded area for the v-menu

1 Answers