可点击的 v-card，带有 v-menu 的排除区域

Question

我正在使用 Vuetify 的 v-card。我想让卡片可以点击，所以我使用了“to”属性。它工作得很好。问题是当我在右上角添加菜单时。当我点击卡片的菜单时，它会像我点击运行其他东西的 v-card 一样计算它。

我试图将图像和文本放在 v-btn 中，但它所需要的所有其他 CSS 并不是真正的解决方案。我还尝试在div with router-link 中添加图像和文本，但菜单按钮的左侧不可点击。

基础设施是否有类似的解决方案？

这是组件的模板。

      <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>

提前致谢！！

Answer 1

您可以在菜单上使用stopevent modifier@click 项目操作，在菜单按钮上使用.prevent...

      <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