How to change style of element based on different data

Question

I have a user's profile page, and depending on the user type I have status of variable that changes. There are the statuses

0 gues user
1 user registered but email not verified
2 user registered and verified
3 user blocked

I am trying to show an icon instead of the numbers, so I am doing it this way

...

<span v-if='user.status == 0' class='fa fa-close'> </span>
<span v-if='user.status == 1' class='fa fa-envelope'> </span>
<span v-if='user.status == 3' class='fa fa-check'> </span>
<span v-if='user.status == 4' class='fa fa-ban'> </span>

...

As you can see this code is very verbose and I am looking for something to avoid writing a code like this.

tony19 · Accepted Answer · 2022-07-16 00:14:47Z

1

You should take a look at the Class Binding documentation

In your example, you could bind the icon, based on the user's status. The template will look like :

<span :class=`fa fa-${getIconFromStatus(user.status)}`></span>

And in the component's script, you'll add this method :

getIconFromStatus(status) {
  switch (status) {
    case 0 : 
      return 'close';
    [...]
  }
}

edited Jul 16, 2022 at 0:14

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 12, 2017 at 10:19

Thomas Ferro

2,45221 silver badges34 bronze badges

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

2 Comments

hidar Over a year ago

Thanks. I will look at the docs. I have thought about this but it looks somewhat cumbersome also

Thomas Ferro Over a year ago

You can always just bind the class to the method, and in this method return the classes but you will lighten the template only to make the switch more redundant. Template : <span :class="getIconFromStatus(user.status)"></span> and the cases' returned values will be like : return 'fa fa-close'

Collectives™ on Stack Overflow

How to change style of element based on different data

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related