Changing CSS classes dynamically with vue js

Question

I have been using vue for about a month now but one thing that I haven't really been able to do properly yet is this.

so in twig we can do something like this

<th class=" 
  {% if condition %}
      class1
  {% else %}      
      class2
  {% end if %}  
">

<th class="sorting_asc" v-for="col in columns" v-if="col.label == sortKey">
<th class="sorting" v-for="col in columns" v-else>

So my first issue is I can't seem to be able to achieve something similar in Vue js. And secondly where I've written 'v-if="col.label == sortKey"', Can I even access the car col.label outside of the html block (outside the loop). Thank you in advanced

tony19 · Accepted Answer · 2022-07-15 20:17:03Z

16

You can do following with vuejs with dynamic styling:

<th v-bind:class="{'class1': condition, 'class2': !condition}">

From documentation:

<div v-bind:class="{ active: isActive }"></div>

The above syntax means the presence of the active class will be determined by the truthiness of the data property isActive. you can as well put simple conditions returning boolean in place of isActive

edited Jul 15, 2022 at 20:17

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 30, 2016 at 5:29

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

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

3 Comments

TheMan68 Over a year ago

But there is still one question not clear. Can I use the ${ col.label } if the if there? as that value comes from the for loop

Saurabh Over a year ago

@TheMan68 I believe you are asking to do this: <th class="{'sorting_asc': col.label == sortKey, 'sorting': col.label != sortKey}" v-for="col in columns"

rubebop Over a year ago

For completeness, it is also possible to use a ternary expression in your example: <th v-bind:class="[condition ? class1 : class2]">.

Collectives™ on Stack Overflow

Changing CSS classes dynamically with vue js

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