如何阻止展开面板头部的按钮触发面板展开/收起

在v-expansion-panel-header中添加删除按钮后，点击按钮会同时触发弹窗操作和面板的展开/收起，需要阻止面板的展开/收起行为。

问题代码示例 #

<v-expansion-panel-header>
  {{ vehicle.VIN }}

  <v-icon v-if="type == 'saved'" color="teal"> mdi-check </v-icon>
  <v-btn
    text
    class="flex-grow-0"
    v-if="type == 'saved'"
    color="red"
    @click="remove(index, type)"
  >
    DELETE
  </v-btn>
</v-expansion-panel-header>

解决方案 #

问题根源是按钮的点击事件会向上冒泡到v-expansion-panel-header，触发它的展开/收起逻辑，只需阻止事件冒泡即可，有两种实现方式：

方式一：使用Vue事件修饰符.stop #

直接在按钮的@click事件上添加.stop修饰符，阻止事件向上传递：

<v-btn
  text
  class="flex-grow-0"
  v-if="type == 'saved'"
  color="red"
  @click.stop="remove(index, type)"
>
  DELETE
</v-btn>

方式二：在方法中手动阻止事件冒泡 #

如果不想在模板中添加修饰符，可在remove方法中通过事件对象阻止冒泡：

1. 模板中传递事件参数：

<v-btn
  text
  class="flex-grow-0"
  v-if="type == 'saved'"
  color="red"
  @click="remove(index, type, $event)"
>
  DELETE
</v-btn>

2. 在方法中调用stopPropagation()：

function remove(index, type, event) {
  event.stopPropagation();
  // 执行你的弹窗逻辑
}

两种方式都能避免点击按钮时触发面板的展开/收起，仅执行弹窗操作。

内容的提问来源于stack exchange，提问作者code-8