Vuejs2 在Bootstrap3Collapse组件中使用FontAWESOME 5--是否更改折叠时的箭头图标？

我正在尝试在VUEJS SPA的手风琴/折叠部分使用Font Awesome 5和Bootstrap 4

单击可折叠元素时，如何使字体箭头图标指向下方

标题一
内容空洞
从“@fortawesome/free solid svg icons”导入{faAngleUp，faAngleDown}”；
导出默认值{
姓名：“我的名字”
计算：{
fangleup（）{
向上返回；
}
fangledown（）{
向下返回；
}
}

我不知道您是否在寻找纯CSS方法，但以防万一：

HTML 举个简单的例子。请注意每个

卡头上的
.collazed
类和
。您可以根据
卡头是否有
.collazed
类更改图标的内容以显示上下箭头


卡1
...
卡2
...
卡片3
...

CSS
.card header i.fas:之前{
内容：“\f107”/*角度向下*/
}
.card-header.i.fas：之前{
内容：“\f106”/*角度向上*/
}

小提琴演示
我不知道您是否在寻找纯CSS方法，但以防万一：

HTML
举个简单的例子。请注意每个
卡头上的
.collazed
类和
。您可以根据
卡头是否有
.collazed
类更改图标的内容以显示上下箭头


卡1
...
卡2
...
卡片3
...

CSS
.card header i.fas:之前{
内容：“\f107”/*角度向下*/
}
.card-header.i.fas：之前{
内容：“\f106”/*角度向上*/
}

小提琴演示

<template>
    <div>
      <div class='card-header' data-toggle='collapse' href='#collapseZero'>
          <a class='card-title'>Heading Title One</a>
          <font-awesome-icon :icon='faAngleUp' class='float-right'></font-awesome-icon>
              </div>
                  <div id='collapseOne' class='card-body collapse' data-parent='#accordion'>
                      Content blah
                  </div>
      </div>
</template>

<script>
import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';

export default {
  name: 'MyName'
  computed: {
    faAngleUp() {
      return faAngleUp;
    }
    faAngleDOwn() {
        return faAngleDown;
    }
  }
</script>