Vue.js手风琴组件点击时无法切换caret上下图标求助

问题原因 #

1. CSS选择器层级错误：v-b-toggle指令绑定在<b-row>元素上，Bootstrap Vue会给这个元素添加/移除collapsed类标识折叠状态，但你的.when-opened和.when-closed是<b-row>的后代元素（嵌套在<b-col>内），而你使用了直接子元素选择器>，导致样式规则无法匹配目标元素。
2. 图标显示逻辑颠倒：当前CSS规则会在折叠状态下隐藏你需要显示的caret-down-fill图标，展开状态下隐藏caret-up-fill图标，和需求完全相反。

解决方案一：修正CSS规则 #

保留现有HTML结构，仅修改<style>部分代码：

<style lang="scss" scoped>  
@import "./../../_style.scss";

/* 折叠状态：隐藏向上箭头，显示向下箭头 */
.collapsed .when-closed {
  display: none;
}
/* 展开状态：隐藏向下箭头，显示向上箭头 */
:not(.collapsed) .when-opened {
  display: none;
}
</style>

解决方案二：用Vue数据绑定简化实现 #

这种方法无需额外CSS控制显示隐藏，直接通过折叠组件状态切换图标：

1. 修改图标区域的HTML：

<b-col class="mt-3 mb-0 view-more d-flex align-items-center justify-content-end" cols='4' aria-hidden="true">
  <b-icon 
    :icon="isDetailsOpen ? 'caret-up-fill' : 'caret-down-fill'" 
    class="view-icon" 
    aria-hidden="true"
  ></b-icon>
</b-col>

2. 给<b-collapse>添加v-model绑定状态：

<b-collapse id="my-details" accordion="my-accordion" role="tabpanel" v-model="isDetailsOpen">

3. 在组件data中定义状态变量：

export default {
  data() {
    return {
      isDetailsOpen: false,
      form: { date: '' }
    }
  },
  methods: {
    show_calendar(calendarId) {
      // 你的日历逻辑
    }
  }
}

这种方式更贴合Vue响应式思想，代码简洁易维护。

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