PrimeVue 3.5.3 Accordion面板展开/折叠事件无法触发求助

先说核心问题：你用的那些事件在PrimeVue 3.5.3的Accordion组件里根本不存在，所以绑定了也不会触发。

1. 用正确的@tab-change事件监听切换 #

PrimeVue 3.x的Accordion组件，检测面板展开/折叠的正确事件是@tab-change，只要面板切换（不管是展开还是折叠）都会触发，返回的参数里包含当前激活面板的索引和绑定的value值。

改好的代码示例：

<Accordion 
  collapseIcon="pi pi-chevron-down" 
  expandIcon="pi pi-chevron-down" 
  :selectOnFocus="true"
  @tab-change="handlePanelToggle"
>
  <AccordionPanel 
    v-for="category in data" 
    :key="category.name" 
    :value="category.name"
  >
    <!-- 这里放你的面板内容 -->
  </AccordionPanel>
</Accordion>

对应的处理方法：

function handlePanelToggle(event) {
  // event.value 是当前激活面板绑定的value值
  // event.index 是当前激活面板的索引
  console.log('面板切换了:', event.value, event.index);
}

2. 别把事件绑错地方 #

你之前把@update:activeIndex绑在了AccordionPanel上，这本身就不对——就算这个事件存在，也应该绑在父组件Accordion上。而且在3.5.3版本里，Accordion的双向绑定是用v-model:activeIndex或者v-model:activeValue，如果想通过监听值变化来检测切换，也可以这么写：

<Accordion 
  collapseIcon="pi pi-chevron-down" 
  expandIcon="pi pi-chevron-down" 
  :selectOnFocus="true"
  v-model:activeValue="activePanel"
>
  <!-- 面板内容 -->
</Accordion>

然后在脚本里监听activePanel的变化：

import { ref, watch } from 'vue';

const activePanel = ref(null);

watch(activePanel, (newVal, oldVal) => {
  console.log('从', oldVal, '切换到', newVal);
});

3. 注意版本对应的事件 #

PrimeVue的组件事件会随版本更新调整，3.5.3的Accordion官方文档里只支持@tab-change这个切换事件。你之前试的@tab-open、@tab-click是TabView组件的事件，@update:activeIndex是Vue双向绑定的语法糖，但Accordion在这个版本里不支持直接通过这个事件触发，所以都没用。

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