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?

tony19 · Accepted Answer · 2022-07-15 19:38:44Z

195

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 Jul 15, 2022 at 19:38

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 4, 2017 at 14:47

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

5 Comments

Jeremy Thomas Over a year ago

I refactored to: <i class="fa" :class="[{ 'fa-checkbox-marked': content['cravings'] }, 'fa-checkbox-blank-outline']"></i>

Bert Over a year ago

@JeremyThomas I would go with either the array syntax or the object syntax, but not both probably.

dave Over a year ago

yeah, i was a little surprised to see that mixed syntax in their docs. not a fan.

chamberlainpi Over a year ago

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)

Bert Over a year ago

@bigp I expect you could watch $route for changes and change your classes as needed. router.vuejs.org/en/api/route-object.html

Happyriri · Accepted Answer · 2017-04-04 14:48:23Z

55

<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 4, 2017 at 14:48

Happyriri

4,4532 gold badges20 silver badges30 bronze badges

2 Comments

Jeremy Thomas Over a year ago

I would have to have too many methods as there are about 20 different terms

Johncl Over a year ago

Vote up for computed, its much cleaner than having expressions inside the html tags.

tony19 · Accepted Answer · 2022-07-15 19:48:19Z

49

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.

edited Jul 15, 2022 at 19:48

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 9, 2018 at 0:13

kaleazy

6,2922 gold badges50 silver badges52 bronze badges

Comments

Boussadjra Brahim · Accepted Answer · 2023-07-13 16:25:43Z

15

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

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

edited Jul 13, 2023 at 16:25

answered Mar 27, 2021 at 12:04

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Comments

Julio Cesar Montenegro · Accepted Answer · 2018-01-04 23:56:32Z

13

the problem is blade, try this

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

edited Jan 4, 2018 at 23:56

answered Jan 4, 2018 at 23:53

Julio Cesar Montenegro

2204 silver badges8 bronze badges

Comments

Sunali Bandara · Accepted Answer · 2020-05-14 17:09:50Z

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.

answered May 14, 2020 at 17:09

Sunali Bandara

4104 silver badges6 bronze badges

1 Comment

MattSom Over a year ago

Most understandable answer.

Al-Amin Islam Hridoy · Accepted Answer · 2023-04-08 17:02:58Z

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

answered Apr 8, 2023 at 17:02

Al-Amin Islam Hridoy

11 bronze badge

Comments

Evgeni Lilov · Accepted Answer · 2024-04-18 21:34:55Z

0

Some example with vue3 and ionic 8

<ion-col size="1" :class="outgoing ? 'ion-text-right' : 'ion-text-left'">

answered Apr 18, 2024 at 21:34

Evgeni Lilov

3394 silver badges5 bronze badges

Comments

Neto CSIR Maape · Accepted Answer · 2025-02-04 21:14:39Z

0

This worked for me:

Use v-bind:class (or shorthand :class) in the template to toggle styles:

<template>
  <div>
    <i :class="condition ? 'class-if-true' : 'class-if-false'">Text</i>
    <i v-bind:class="condition ? 'class-if-true' : 'class-if-false'">Text</i>
    <button @click="condition = !condition">Change styling...</button>
  </div>
</template>

Define the condition variable in the Vue component’s data() function:

<script>
export default {
  data() {
    return {
      condition: false, // Default state
    };
  },
};
</script>

Define your styles in the style (scoped so it only applies to this specific component) section:

<style scoped>  
.class-if-true  
{
   color: blue;
}  
.class-if-false
{    
  color: red;
}
</style>

edited Feb 4 at 21:14

answered Feb 4 at 21:12

Neto CSIR Maape

11 bronze badge

Collectives™ on Stack Overflow

Vue.js: Conditional class style binding

9 Answers 9

5 Comments

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

5 Comments

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related