Vuetify 3可展开面板自定义图标状态切换异常问题

手动展开/折叠Vuetify扩展面板时，自定义的down和up箭头图标无法正常切换状态。需求是将默认在标题末尾的箭头移至标题文本前方，位置调整已实现，但图标无法随面板展开/折叠同步切换状态。

组件结构说明：

• 每个子组件（ChildComponentA/ChildComponentB/ChildComponentC）独立包含一个<v-expansion-panel>，无法在<v-expansion-panels>上使用循环渲染
• 面板的动态数据通过prop从父组件传递

核心思路是绑定扩展面板的expanded状态，通过该状态控制自定义图标的显示切换，同时隐藏默认的Vuetify箭头图标。

步骤1：子组件实现状态绑定与自定义图标 #

<template>
  <v-expansion-panel v-model="isExpanded">
    <v-expansion-panel-header>
      <!-- 根据展开状态切换箭头图标 -->
      <v-icon class="mr-2">
        {{ isExpanded ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
      </v-icon>
      <!-- 从props接收的面板标题 -->
      <span>{{ panelTitle }}</span>
    </v-expansion-panel-header>
    <v-expansion-panel-content>
      <!-- 从props接收的面板内容 -->
      {{ panelContent }}
    </v-expansion-panel-content>
  </v-expansion-panel>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
  panelTitle: String,
  panelContent: String,
  initialExpanded: {
    type: Boolean,
    default: false
  }
})

// 绑定面板展开状态，支持从父组件传入初始值
const isExpanded = ref(props.initialExpanded)
</script>

<style scoped>
/* 隐藏Vuetify默认箭头图标 */
.v-expansion-panel-header__icon {
  display: none;
}
</style>

步骤2：父组件传递数据与初始状态 #

<template>
  <v-expansion-panels>
    <ChildComponentA 
      panelTitle="面板A标题" 
      panelContent="面板A的内容"
      :initial-expanded="false"
    />
    <ChildComponentB 
      panelTitle="面板B标题" 
      panelContent="面板B的内容"
      :initial-expanded="true"
    />
    <ChildComponentC 
      panelTitle="面板C标题" 
      panelContent="面板C的内容"
      :initial-expanded="false"
    />
  </v-expansion-panels>
</template>

<script setup>
import ChildComponentA from './ChildComponentA.vue'
import ChildComponentB from './ChildComponentB.vue'
import ChildComponentC from './ChildComponentC.vue'
</script>

关键说明 #

• v-model="isExpanded"会自动同步面板的展开/折叠状态，点击面板时isExpanded值自动更新，触发图标切换
• 通过CSS隐藏默认箭头类.v-expansion-panel-header__icon，避免与自定义图标冲突
• 子组件通过initialExpanded props接收初始状态，支持父组件统一控制面板初始显示状态

内容的提问来源于stack exchange，提问作者Rohít Jíndal