javascript - 包裹在标签内时，点击事件不会在按钮内触发

Question

我将表格行包装在a标签中，按钮@click功能无法正常工作，它会从a标签打开链接。

我想在仅单击按钮时打开一个弹出菜单，并且当用户单击行时它应该重定向它。我的意思是点击按钮不应该触发重定向

代码：

<nuxt-link
  style="color: #212121"
  v-for="item in customers"
  :key="item.userId"
  :to="'/customer/profile/?id=' + item.userId + '&name=' + item.name"
  role="row"
>
              <div role="cell">
                {{ item.name }}
              </div>
               <div role="cell">
                <v-btn
                  @click.stop="deleteItem(item)"
                  fab
                  x-small
                  text
                  class="ml-2"
                  color="danger"
                  v-if="
                    $store.state.role === 'manager' ||
                      $store.state.role === 'developer'
                  "
                >
                  <v-icon color="danger">
                    mdi-delete
                  </v-icon>
                </v-btn>
                <v-btn
                  @click.stop="editItem(item.userId)"
                  fab
                  x-small
                  color="primary"
                  class="ml-2"
                >
                  <v-icon color="white">
                    mdi-pencil
                  </v-icon>
                </v-btn>
              </div>
 </nuxt-link>

div我使用标签和CSS 标签创建了一个表格，display: table并将每一行包裹起来nuxt-link以创建一个锚点

标签： javascripthtmlvue.js