Vue.js: Conditional class style binding

Question

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?

You can also do something like ` – xpuu Sep 02 '19 at 18:33 — xpuu, Sep 02 '19 at 18:33

Bert · Accepted Answer · 2017-04-04T15:15:14.903

126

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]
    }
  }
}

edited Apr 04 '17 at 15:15

answered Apr 04 '17 at 14:47

Bert

70,407
13
164
146

3

I refactored to: `` – Jeremy Thomas Apr 04 '17 at 14:52
1

@JeremyThomas I would go with either the array syntax or the object syntax, but not both probably. – Bert Apr 04 '17 at 14:54
yeah, i was a little surprised to see that mixed syntax in their docs. not a fan. – dave Nov 16 '17 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) – bigp Apr 12 '18 at 23:21
@bigp I expect you could watch `$route` for changes and change your classes as needed. https://router.vuejs.org/en/api/route-object.html – Bert Apr 13 '18 at 00:40

score 40 · Answer 2 · answered Apr 04 '17 at 14:48

40

<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';
    }
}

answered Apr 04 '17 at 14:48

Happyriri

3,825
1
13
25

3

I would have to have too many methods as there are about 20 different terms – Jeremy Thomas Apr 04 '17 at 14:53
4

Vote up for computed, its much cleaner than having expressions inside the html tags. – Johncl Nov 13 '18 at 07:36

score 30 · Answer 3 · answered Jul 09 '18 at 00:13

30

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.

answered Jul 09 '18 at 00:13

kaleazy

4,966
2
40
47

Julio Cesar Montenegro · Answer 4 · 2018-01-04T23:56:32.760

9

the problem is blade, try this

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

edited Jan 04 '18 at 23:56

answered Jan 04 '18 at 23:53

Julio Cesar Montenegro

160
2
7

score 4 · Answer 5 · answered May 14 '20 at 17:09

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.

score 0 · Answer 6 · answered Mar 27 '21 at 12:04

0

You could use string template like with backticks `` :

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

answered Mar 27 '21 at 12:04

Boussadjra Brahim

42,672
10
53
86

Vue.js: Conditional class style binding

6 Answers6

Linked

Related