使用 Vue 触发链接内的按钮

Question

我有一组图像，其中包含作者等一些信息，现在我添加了一些按钮以允许用户喜欢图像。由于图像有指向图像屏幕的链接，我不知道如何触发按钮以避免触发链接。这是代码，我使用 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>上面的代码生成一个图像，当鼠标悬停时，底部会出现一个图层，显示名称和一个喜欢图像的按钮。单击用户链接，它可以正常工作，正如预期的那样。单击应触发操作的按钮不起作用，因为单击了图像链接。我该如何解决这个问题？

Answer 1

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

<a href="example.com">

  ...  

  <v-btn @click.stop.prevent="test()">

   ...

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

<a href="example.com">

  ...  

  <v-btn @click="test($event)">

   ...

methods: {

  test (event) {

    event.preventDefault()

    event.stopPropagation()

  }

}