119

I have some data that is accessible via:

{{ content['term_goes_here'] }}

... and this evaluated to either true or false. I'd like to add a class depending on the truthiness of the expression like so:

<i class="fa" v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>

where true gives me the class fa-checkbox-marked and false would give me fa-checkbox-blank-outline. The way I wrote it above gives me an error:

- invalid expression: v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"

How should I write it to be able to conditionally determine the class?

0

7 Answers 7

183

Use the object syntax.

v-bind:class="{'fa-checkbox-marked': content['cravings'],  'fa-checkbox-blank-outline': !content['cravings']}"

When the object gets more complicated, extract it into a method.

v-bind:class="getClass()"

methods:{
    getClass(){
        return {
            'fa-checkbox-marked': this.content['cravings'],  
            'fa-checkbox-blank-outline': !this.content['cravings']}
    }
}

Finally, you could make this work for any content property like this.

v-bind:class="getClass('cravings')"

methods:{
  getClass(property){
    return {
      'fa-checkbox-marked': this.content[property],
      'fa-checkbox-blank-outline': !this.content[property]
    }
  }
}
5
  • 6
    I refactored to: <i class="fa" :class="[{ 'fa-checkbox-marked': content['cravings'] }, 'fa-checkbox-blank-outline']"></i> Apr 4, 2017 at 14:52
  • 1
    @JeremyThomas I would go with either the array syntax or the object syntax, but not both probably.
    – Bert
    Apr 4, 2017 at 14:54
  • yeah, i was a little surprised to see that mixed syntax in their docs. not a fan.
    – dave
    Nov 16, 2017 at 21:34
  • How can you trigger the class binding to update when the watched properties are coming from an external source, like a vue-router change? (ex: this.$router.push('/homepage') called elsewhere in another component) Apr 12, 2018 at 23:21
  • @bigp I expect you could watch $route for changes and change your classes as needed. router.vuejs.org/en/api/route-object.html
    – Bert
    Apr 13, 2018 at 0:40
51
<i class="fa" v-bind:class="cravings"></i>

and add in computed :

computed: {
    cravings: function() {
        return this.content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline';
    }
}
2
  • 3
    I would have to have too many methods as there are about 20 different terms Apr 4, 2017 at 14:53
  • 5
    Vote up for computed, its much cleaner than having expressions inside the html tags.
    – Johncl
    Nov 13, 2018 at 7:36
47

Why not pass an object to v-bind:class to dynamically toggle the class:

<div v-bind:class="{ disabled: order.cancelled_at }"></div>

This is what is recommended by the Vue docs.

13

the problem is blade, try this

<i class="fa" v-bind:class="['{{content['cravings']}}' ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>
0
13

You could use string template like below with backticks `` :

:class="`${content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline'}`"
1
7

if you want to apply separate css classes for same element with conditions in Vue.js you can use the below given method.it worked in my scenario.

html

 <div class="Main" v-bind:class="{ Sub: page}"  >

in here, Main and Sub are two different class names for same div element. v-bind:class directive is used to bind the sub class in here. page is the property we use to update the classes when it's value changed.

js

data:{
page : true;
}

here we can apply a condition if we needed. so, if the page property becomes true element will go with Main and Sub claases css styles. but if false only Main class css styles will be applied.

1
  • Most understandable answer.
    – MattSom
    Feb 28, 2022 at 15:44
0

There are actually multiple ways to do that. You can use the condition directly inside the v-bind like this:

<i v-bind:class="`${content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline'}`">

And the other one is where you use the condition inside the script part, like this in the template:

<i v-bind:class="yourClass">

And then this in the script:

data() { 
    return { 
      yourClass = content['cravings'] ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline' 
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.