使用 vue / nuxt js 切换 fontawesome 图标

Question

I want to toggle this fontawesome icons

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

This is my code

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

my script

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

Answer 1

Change your code like this:

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

Answer 2

You could set active to false/true like active=!active and refactor fa-heart class:

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