在Vue/Nuxt.js中实现FontAwesome心形图标的切换功能

你的代码核心问题在于点击事件的处理：@click="!active"只是计算了active的反值，但没有将这个新值赋值回active变量，导致data里的状态从未更新，图标也就不会切换。

修正方案1：直接在点击事件中更新状态 #

修改HTML部分的点击事件，直接对active进行赋值：

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

脚本部分保持不变：

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

修正方案2：使用方法处理点击事件（更适合后续扩展逻辑） #

如果后续需要在切换状态时添加额外操作（比如发送请求、记录日志），可以封装成方法：
HTML部分：

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

脚本部分添加方法：

data() {
  return {
    active: false,
  }
},
methods: {
  toggleHeart() {
    this.active = !this.active;
    // 这里可以添加其他逻辑，比如调用API更新收藏状态
  }
}

两种方案都能实现心形图标的切换效果，方案2更便于后续功能扩展。

内容的提问来源于stack exchange，提问作者user19610519