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

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

• javascript
• class
• styling
• vue.js

1 Answer 1

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