0

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>
Appu
  • 35
  • 5
  • 1
    I would assume that `feather.replace()` is manipulating the DOM therefore removing the click event listener. Try putting the listener on the parent span. – dantheman Mar 31 '23 at 07:03
  • I removed it from icon and put it in parent span instead. It still shows only black color. :( – Appu Mar 31 '23 at 07:07
  • Did the @mouseover on the div works and fill it with blue ? – Adri Mar 31 '23 at 07:11
  • I would also assume that the inline fill is getting removed as well. Try using the `active` class to style the inner svg using CSS. Inspect the icon in the browser to see what HTML is being generated for the icon, and style accordingly. – dantheman Mar 31 '23 at 07:11
  • @Adri No event listener is working it seems. Not sure where to make changes to make these listeners work. – Appu Mar 31 '23 at 07:13
  • @dantheman But it's taking the inline fill black color where value of isHearted is false(default). It's not listening to events. – Appu Mar 31 '23 at 07:14

1 Answers1

2

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()

dantheman
  • 3,189
  • 2
  • 10
  • 18