Vue3中Feather心形图标点击切换填充颜色失效问题排查

你的代码存在几个核心问题导致isHearted状态切换和颜色更新失效：

1. Feather图标替换导致绑定丢失：feather.replace()会在组件挂载后把<i data-feather="heart">替换成独立的SVG元素，原<i>上绑定的@click事件和fill属性会直接失效，因为原元素已被移除。
2. fill属性未使用Vue绑定：你直接写fill="{isHearted ? 'blue' : 'black'}"，这只是一个普通字符串，Vue不会解析其中的表达式。
3. 悬停事件干扰状态逻辑：外层div的@mouseover="isHearted = true"会在鼠标悬停时强制将isHearted设为true，可能覆盖点击切换的效果（如果不需要这个悬停行为，建议直接移除）。

解决方案1：使用Vue3适配的Feather组件（推荐） #

使用官方维护的Vue组件库能避免原生替换的问题，更符合Vue的响应式逻辑：

1. 安装组件库：

npm install vue-feather-icons

2. 修改代码（组合式API）：

<template>
  <div>
    <span class="info-icon" :class="{ 'active': isHearted }">
      <Heart 
        @click="toggleHeart" 
        :fill="isHearted ? 'blue' : 'black'"
        size="24" <!-- 可自定义图标尺寸 -->
      />
    </span>
  </div>
</template>

<script setup>
import { Heart } from 'vue-feather-icons'
import { ref } from 'vue'

const isHearted = ref(false)

const toggleHeart = () => {
  isHearted.value = !isHearted.value
}
</script>

解决方案2：手动处理原生Feather图标 #

如果不想引入组件库，需要在图标替换后手动绑定事件和更新属性：

<template>
  <div>
    <span class="info-icon" :class="{ 'active': isHearted }" ref="heartWrapper">
      <i data-feather="heart"></i>
    </span>
  </div>
</template>

<script>
import feather from 'feather-icons'

export default {
  data() {
    return {
      isHearted: false,
      heartSvg: null
    };
  },

  mounted() {
    // 替换图标
    feather.replace()
    // 获取生成的SVG元素
    this.heartSvg = this.$refs.heartWrapper.querySelector('svg')
    // 绑定点击事件
    this.heartSvg.addEventListener('click', this.toggleHeart)
    // 初始化填充颜色
    this.updateHeartColor()
  },

  // 监听状态变化，自动更新颜色
  watch: {
    isHearted() {
      this.updateHeartColor()
    }
  },

  beforeUnmount() {
    // 销毁前移除事件监听，防止内存泄漏
    if (this.heartSvg) {
      this.heartSvg.removeEventListener('click', this.toggleHeart)
    }
  },

  methods: {
    toggleHeart() {
      this.isHearted = !this.isHearted
    },
    updateHeartColor() {
      if (this.heartSvg) {
        this.heartSvg.setAttribute('fill', this.isHearted ? 'blue' : 'black')
      }
    }
  }
};
</script>

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