Javascript 在带有Vue的链接中触发一个按钮

我有一组带有作者信息的图像，现在我添加了一些按钮，允许用户喜欢这些图像

由于图像有一个指向图像屏幕的链接，我不知道如何触发按钮以避免触发链接

下面是代码，我使用的是Vuetify和Nuxt：

<nuxt-link
  :to="
    `/photo/${slotProps.item.id}/${
      slotProps.item.slug
    }`
  "
>
  <v-hover>
    <v-img
      slot-scope="{ hover }"
      :src="slotProps.item.url"
    >
      <v-fade-transition mode="in-out">
        <div
          v-if="hover"
          class="d-flex transition-fast-in-fast-out photo-overlay pa-2"
        >
          <div
            class="d-flex pl-1 credits justify-space-between align-center w-100"
          >
            <div>
              <nuxt-link
                :to="
                  `/user/${slotProps.item.pId}`
                "
                class="secondary--text body-2 d-inline-block"
              >
                <v-avatar size="30">
                  <img
                    :src="slotProps.item.avatar"
                    :alt="`${slotProps.item.name}`"
                  />
                </v-avatar>
                <span class="ml-2">
                  {{ slotProps.item.name }}
                </span>
              </nuxt-link>
            </div>
            <div>
              <v-menu
                v-model="addToGalleriesMenu"
                :close-on-content-click="false"
                :nudge-width="200"
              >
                <template v-slot:activator="{ on, attrs }">
                  <v-btn v-on="on" v-bind="attrs" icon color="secondary">
                    <v-icon small>
                      fal fa-hearth
                    </v-icon>
                  </v-btn>
                </template>
                <v-card outlined>
                  <v-card-title>Test</v-card-title>
                </v-card>
              </v-menu>
            </div>
          </div>
        </div>
      </v-fade-transition>
    </v-img>
  </v-hover>
</nuxt-link>

{{slotProps.item.name}
法法炉
试验

上面的代码生成一个图像，鼠标悬停时，底部会出现一个层，显示名称和一个按钮，以喜欢该图像

点击用户链接，它工作正常，正如预期的那样。单击应该触发操作的按钮不起作用，因为图像链接被单击

---

如何解决此问题？

您可以使用Vue单击修改器非常轻松地停止事件向父元素的传播：

...  
...

不使用Vue修改器也可以实现同样的效果：

...  
...

方法：{
测试（事件）{
event.preventDefault（）
event.stopPropagation（）
}
}

谢谢你的提问，但是如何处理v-on=“on”当我没有点击

@处理程序时，我应该把stopPropagation放在哪里？Thanks@AyeyeBrazo尝试添加空属性：
多亏了您的代码片段，我终于找到了解决方案！干杯