toggle fontawesome icons using vue / nuxt js-CodePudding

I want to toggle this fontawesome icons

<i ></i> //when active
<i ></i>  //when not active

This is my code

<i  
        role="button" 
        @click="!active" 
        :
        ></i>

my script

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

CodePudding user response：

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

<i  
        role="button" 
        @click="active = !active" 
        :
        ></i>

CodePudding user response：

Change your code like this:

<button :  style="appearance: none;" @click="active = !active" />