Detecting click event on feather icon style

Question

I have a feather icon in vue 3 app which I want to get filled with color based on click. It seem like it's never taking the isHearted value as true and always filling with black color.

Code:

<template>
    <div @mouseover="isHearted = true">
      <span class="info-icon" :class="{ 'active': isHearted }">
        <i data-feather="heart" @click="toggleHeart" fill="{isHearted ? 'blue' : 'black'}"></i>
      </span>
    </div>
</template>
  
<script>
  import feather from 'feather-icons'
  
  export default {
    components: {
    },
    data() {
      return {
        isHearted: false,
      };
    },

    mounted() {
    feather.replace()
    },

    methods: {
      toggleHeart() {
        this.isHearted = !this.isHearted;
      },
    },
  };
  </script>

Answer 1

Please try the following:

<template>
  <span class="info-icon" :class="{ 'active': isHearted }" @click="toggleHeart">
    <i data-feather="heart"></i>
  </span>
</template>

<script>
import feather from 'feather-icons'

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

  mounted() {
    feather.replace()
  },

  methods: {
    toggleHeart() {
      this.isHearted = !this.isHearted;
    },
  },
};
</script>

<style>
  .info-icon:hover svg, .info-icon.active svg {
    fill: blue;
  }
</style>

This just uses CSS to style the svg that's generated by the feather.replace()