How to choose class in Vue.js depending on multiple values?

Question

I'd like to choose class of an element bases on importance:

   <strong> Importance: 
       <span :class="importance ? (calculate class here)">
        </span>  {{someText}}
    </strong>

Let's say the class vlue should be imp0 ,imp1,imp2, imp3 or imp4, depending on whether importance equals 0,1,2,3 or 4.

You may ask why not calculate the value in a method function?

The answer is: to keep the class value synced with the result of a separate method which also gets importance as input parameter after the class is rendered.

So wondering how can I achieve this?

Update: I managed to do it with a convulted ternary conditional:

 :class="importance==0 ? 'imp0': (importance==1? 'imp1': (importance==2 ? 'imp2': (importance==3 ? 'imp3': 'imp4')))

but wondering if there is a more clean way to do so?

raina77ow · Accepted Answer · 2018-10-01 10:24:40Z

1

If your mapping is that direct, you can let it go with simple expression:

:class="'imp' + importance"

... but I strongly advise you to at least consider it a technical debt. Remember, you can use any attribute in your CSS selector, not just classes.

answered Oct 1, 2018 at 10:24

raina77ow

107k16 gold badges205 silver badges240 bronze badges

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

3 Comments

Babr Over a year ago

Thanks for the tip. What do you mean by 'technical debt' though?

raina77ow Over a year ago

The same as everybody else, I suppose. ) While this solution is simple, it's apparently neither readable nor flexible. What exactly are the differences between those 'imp1', 'imp2', etc. classes?

Babr Over a year ago

Well, those classes show different icons, which help the form to be more readable. I tried first to use SVG icons, but found that even more cumbersome.

Collectives™ on Stack Overflow

How to choose class in Vue.js depending on multiple values?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related