Vue3中v-expansion-panel-title内@click.stop.prevent失效问题求助

解决方案 #

在超链接标签上使用@click.stop修饰符阻止事件冒泡，确保点击链接时不会触发面板的展开/收起操作，同时保留链接自身的跳转或交互行为。

原因分析 #

Vue3搭配Vuetify3时，v-expansion-panel-title的根元素绑定了点击事件用于切换面板状态。当点击标题内的超链接时，事件会向上冒泡到标题元素，导致面板切换优先触发，覆盖了链接的点击行为。@click.stop可以切断事件的冒泡路径，让链接的点击事件仅作用于自身。

修改后的代码 #

<template>
  <v-expansion-panels>
    <v-expansion-panel>
      <v-expansion-panel-title>
        <template v-slot:default>
          <v-row no-gutters>
            <v-col class="d-flex justify-start" cols="4">
              Trip name
              <v-spacer></v-spacer>
              <!-- 通过@click.stop阻止事件冒泡到标题元素 -->
              <a href="#" @click.stop>Learn more</a>
            </v-col>
          </v-row>
        </template>
      </v-expansion-panel-title>
      <v-expansion-panel-text>
        <v-text-field
          v-model="trip.name"
          placeholder="Caribbean Cruise"
          hide-details
        ></v-text-field>
      </v-expansion-panel-text>
    </v-expansion-panel>
  </v-expansion-panels>
</template>

<script>
export default {
  data: () => ({
    trip: {
      name: '',
      location: null,
      start: null,
      end: null,
    },
    locations: [
      'Australia',
      'Barbados',
      'Chile',
      'Denmark',
      'Ecuador',
      'France',
    ],
  }),
}
</script>

补充说明 #

如果需要给链接添加自定义交互逻辑，可在@click.stop后绑定处理函数：

<a href="#" @click.stop="handleLearnMore">Learn more</a>

然后在组件内定义对应方法：

methods: {
  handleLearnMore() {
    // 这里编写自定义逻辑，比如打开弹窗、跳转路由等
    console.log('触发Learn more交互');
  }
}

内容的提问来源于stack exchange，提问作者Abdulkadir Dalga