Javascript 在图标和字体之间切换

我在Vuejs的同一个按钮中使用了两个字体很棒的图标。现在我想做的是改变图标点击和切换回如果再次点击。HTML代码是：

<b-button @click="myFunction(this)" id="toggle_icon" class="action-button" v-b-tooltip.hover title="Cells Comparison">
  <font-awesome-icon :icon="['fas','car-battery']"/> &nbsp;
  <font-awesome-icon :icon="['fas','balance-scale']"/>                            
</b-button>

---

我得到的错误是“myFunction”已定义但从未使用过。没有JQuery，您可以为此使用computed属性

创建一个名为carbattery或toggle的数据属性，或者任何您认为最能描述它的属性

根据carbattery/toggle创建一个返回字体图标的计算属性

绑定计算属性

大概是这样的：

data () {
  return {
    carbattery: true
  }
},
computed: {
  icon() {
    if (this.carbattery) {
      return ['fas','car-battery']
    } else {
      return ['fas','balance-scale']
    }
  }
}

<b-button @click="carbattery = !carbattery" class="action-button" v-b-tooltip.hover title="Cells Comparison">
  <font-awesome-icon :icon="icon"/>
</b-button>

数据（）{
返回{
卡巴特里：是的
}
},
计算：{
图标（）{
如果（这是卡巴特里）{
返回['fas'，'car-battery']
}否则{
收益率['fas'，'balance-scale']
}
}
}

只是计算属性的一点改进：

return['fas'，this.cabattery？'car battery'，'balance scale']

是的，这是一个很好的单行线，但对于初学者来说，它也更难阅读。到底在何处添加数据（），在附图中？有了数据函数，只需在第177行中添加carbatery:true（并在第176行末尾添加逗号）就有一个错误

data () {
  return {
    carbattery: true
  }
},
computed: {
  icon() {
    if (this.carbattery) {
      return ['fas','car-battery']
    } else {
      return ['fas','balance-scale']
    }
  }
}

<b-button @click="carbattery = !carbattery" class="action-button" v-b-tooltip.hover title="Cells Comparison">
  <font-awesome-icon :icon="icon"/>
</b-button>