如何使用条件语句在 Vue JS 中切换材料设计图标？答案

【问题标题】：How to toggle material design icons in Vue JS with a conditional statement?如何使用条件语句在 Vue JS 中切换材料设计图标？
【发布时间】：2020-10-08 03:15:34
【问题描述】：

我正在切换按钮内的文本，但我想切换图标。这是我的代码。

<b-button size="sm" @click="row.toggleDetails" class="mr-2">
  {{ row.detailsShowing ? '-' : '+'}} Details
</b-button>

我想使用图标作为切换的触发器。单击 chevron 向下展开并单击 chevron 向上折叠。

<i class="mdi mdi-chevron-down"></i>
<i class="mdi mdi-chevron-up"></i>

我该如何改变呢？我正在尝试的一切都在打破。谢谢

【问题讨论】：

标签： javascript vue.js switch-statement icons bootstrap-vue

【解决方案1】：

<b-button size="sm" @click="row.toggleDetails" class="mr-2">
  <b-icon :icon="row.detailsShowing ? chevron-up : chevron-down"></b-icon> 
  Details
</b-button>

【讨论】：

感谢 Dipen Shah。这很好用。感谢您的及时帮助。
效果很好！重要提示：在我的情况下，图标名称需要在单引号内（例如：'chevron-up' : 'chevron-down'）...