使用vue / nuxt js切换方框图标

Question

我想切换这个方框图标

<i class="fa-solid fa-heart"></i> //when active
<i class="fa-regular fa-heart"></i>  //when not active

这是我的密码

<i class="fs-5" 
        role="button" 
        @click="!active" 
        :class="[active ? 'fa-solid fa-heart' : 'fa-regular fa-heart'] "
        ></i>

我的剧本

data() {
    return {
      active: false,
    }
  },

Answer 1

可以将活动设置为false/true，如active=!active和重构fa-heart类：

<i class="fs-5" 
        role="button" 
        @click="active = !active" 
        :class="['fa-heart',active ? 'fa-solid' : 'fa-regular'] "
        ></i>

Answer 2

更改代码如下：

<button :class="active ? 'fa-solid' : 'fa-regular'" class="fs-5 fa-heart" style="appearance: none;" @click="active = !active" />