如何阻止Vuetify 3展开面板点击内部清除按钮时关闭

问题核心是点击mdi-eraser图标时，点击事件会向上冒泡到v-expansion-panel-title组件，触发其默认的展开/收起切换逻辑。只需阻止事件冒泡即可解决，以下是两种常用方案：

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

直接在@click指令后添加.stop修饰符，自动阻止事件向上冒泡，代码更简洁：

<v-expansion-panels>
    <v-expansion-panel>
        <v-expansion-panel-title>
            Buscador
            <template v-slot:actions="{ expanded }">
                <v-icon :color="!expanded ? 'teal' : ''">{{ expanded ? 'mdi-minus' : 'mdi-plus' }}</v-icon>
                <!-- 添加.stop修饰符阻止冒泡 -->
                <v-icon class="ml-2" @click.stop="limpiarBuscador">mdi-eraser</v-icon>
            </template>
        </v-expansion-panel-title>
        <v-expansion-panel-text>
<!-- SOME INFO -->
        </v-expansion-panel-text>
    </v-expansion-panel>
</v-expansion-panels>

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

如果需要在limpiarBuscador内执行额外逻辑，可传递事件参数并调用stopPropagation()：

模板代码： #

<v-expansion-panels>
    <v-expansion-panel>
        <v-expansion-panel-title>
            Buscador
            <template v-slot:actions="{ expanded }">
                <v-icon :color="!expanded ? 'teal' : ''">{{ expanded ? 'mdi-minus' : 'mdi-plus' }}</v-icon>
                <!-- 传递$event参数给方法 -->
                <v-icon class="ml-2" @click="limpiarBuscador($event)">mdi-eraser</v-icon>
            </template>
        </v-expansion-panel-title>
        <v-expansion-panel-text>
<!-- SOME INFO -->
        </v-expansion-panel-text>
    </v-expansion-panel>
</v-expansion-panels>

脚本逻辑： #

function limpiarBuscador(event) {
    // 先阻止事件冒泡
    event.stopPropagation();
    // 执行你的清除逻辑
    // ...
}

两种方案均可实现需求，推荐第一种方法，代码更直观简洁。

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