大家好，我是vue js的新手，目前我正在下面制作一个手风琴来扩展/折叠手风琴内容，但我面临的一个问题是，当我点击时，<b-icon icon="caret-up-fill" class="view-less-icon " aria-hidden="true"></b-icon>没有改变。有人能帮我吗？
<div class="accordion" role="tablist">
<b-card no-body class="mb-1" style="border:none;">
<b-card-header role="tab" style="background-color:white; border: none;">
<b-row class="title" v-b-toggle.my-details>
<b-col class="mt-3 mb-0 " cols='8'> My Details</b-col>
<b-col class="mt-3 mb-0 view-more d-flex align-items-center justify-content-end" cols='4' aria-hidden="true">
<span class="when-opened"><b-icon icon="caret-down-fill" class="view-more-icon " aria-hidden="true"></b-icon></span>
<span class="when-closed"><b-icon icon="caret-up-fill" class="view-less-icon " aria-hidden="true"></b-icon></span>
</b-col>
</b-row>
</b-card-header>
<b-collapse id="my-details" accordion="my-accordion" role="tabpanel">
<b-card-body>
<b-card style="border:none;" >
<b-row style="margin-bottom: 30px; border-bottom: 1px solid #EEF3F7;" >
<label for="name">Name</label>
<b-col cols="12">
<b-row class="font-weight-bold">
<b-col>Name</b-col>
</b-row>
</b-col>
</b-row>
<b-row >
<label for="date">Date</label>
<b-col cols="12">
<b-row class="font-weight-bold">
<b-form-input
style="border-left: 0px;"
type="text"
name="my"
v-model="form.date"
placeholder="DD/MM/YYYY"
@click="show_calendar('my_calendar')"
/>
</b-row>
</b-col>
</b-row>
<b-row >
<b-col class="mt-1 mb-0" > Description</b-col>
<b-col class="mt-2 mb-0 view-more d-flex align-items-center justify-content-end" v-b-toggle.desc-collapse cols='4'>
<span class="when-opened"><b-icon icon="chevron-down" class="view-more-icon d-flex align-items-center justify-content-end" aria-hidden="true"></b-icon></span>
<span class="when-closed"><b-icon icon="chevron-right" class="view-less-icon d-flex align-items-center justify-content-end" aria-hidden="true"></b-icon></span>
</b-col>
</b-row>
<b-collapse id="desc-collapse">
<b-card style="border:none ;" >
hello world
</b-card>
</b-collapse>
</b-card>
</b-card-body>
</b-collapse>
</b-card>
<style lang="scss" scoped>
@import "./../../_style.scss";
.collapsed > .when-opened,
:not(.collapsed) > .when-closed {
display: none;
}
</style>
我想让它成为当我不点击它时，它会显示插入符号向下图标，当我点击它时会变成插入符号向上图标，非常感谢！！！
我已经为您的问题创建了一个代码片段。我删除了两个图标，只在CSS中使用transform。
new Vue({
el: '#app',
}).not-collapsed .caretDownIcon {
transform: rotate(180deg);
}
.caretDownIcon {
transition: all .3s linear;
}<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.22.0/bootstrap-vue-icons.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.22.0/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/bootstrap-vue@2.22.0/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-card no-body class="mb-1" style="border:none;">
<b-card-header role="tab" style="background-color:white; border: none;">
<b-row class="title" v-b-toggle.my-details>
<b-col class="mt-3 mb-0 " cols='8'> My Details</b-col>
<b-col class="mt-3 mb-0 view-more d-flex align-items-center justify-content-end" cols='4' aria-hidden="true">
<b-icon class="caretDownIcon" icon="caret-down-fill" class="view-more-icon " aria-hidden="true"></b-icon>
</b-col>
</b-row>
</b-card-header>
<b-collapse id="my-details" accordion="my-accordion" role="tabpanel">
<b-card-body>
<b-card style="border:none;">
<b-row style="margin-bottom: 30px; border-bottom: 1px solid #EEF3F7;">
<label for="name">Name</label>
<b-col cols="12">
<b-row class="font-weight-bold">
<b-col>Name</b-col>
</b-row>
</b-col>
</b-row>
<b-row>
<label for="date">Date</label>
<b-col cols="12">
<b-row class="font-weight-bold">
<b-form-input style="border-left: 0px;" type="text" name="my" placeholder="DD/MM/YYYY" />
</b-row>
</b-col>
</b-row>
<b-row>
<b-col class="mt-1 mb-0"> Description</b-col>
<b-col class="mt-2 mb-0 view-more d-flex align-items-center justify-content-end" v-b-toggle.desc-collapse cols='4'>
<span class="when-opened">
<b-icon icon="chevron-down" class="view-more-icon d-flex align-items-center justify-content-end" aria-hidden="true"></b-icon>
</span>
<span class="when-closed">
<b-icon icon="chevron-right" class="view-less-icon d-flex align-items-center justify-content-end" aria-hidden="true"></b-icon>
</span>
</b-col>
</b-row>
<b-collapse id="desc-collapse">
<b-card style="border:none ;">
hello world
</b-card>
</b-collapse>
</b-card>
</b-card-body>
</b-collapse>
</b-card>
</div>