Change color of Icon when text is in input - vue.js

Question

I use the font-awesome search icon in my project. Actually, I do it in vue.js. The font-awesome-icon is in the input component and I want to change the color of this icon to yellow when the input is active and what's more - also when there are some already typed text in the input.

 <font-awesome-icon :class="isEmpty ? 'white-color' : 'yellow-color'" icon="search" />

Earlier I had css to make this effect, but it didn't handle problem - when some text is already typed, but there is no focus on input. It was like that:

&{
svg {
   color: yellow;
  }
}

Amaarockz · Accepted Answer · 2021-01-30 15:21:08Z

1

Try doing this

<font-awesome-icon :class="{'white-color' : isEmpty, 'yellow-color': !isEmpty }" icon="search" />

and having the stylings as

.white-color {
  color: white
}
.yellow-color {
  color: yellow
}

ELSE you can use computed property

<font-awesome-icon :style="getColor" icon="search" />

and your computed property should be

computed: {
 getColor() {
   if(this.isEmpty) {
     return {
        color: 'white'
     }
   }
  return {
   color: 'yellow'
  }
 }
}

edited Jan 30, 2021 at 15:21

answered Jan 30, 2021 at 15:05

Amaarockz

4,6942 gold badges12 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change color of Icon when text is in input - vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related