Bind conditional class and var class - VueJS

Question

Given the props:

someBool = true;
someString = 'set-class'

This will add conditional-class as a class to the element when someBool is true:

v-bind:class="{'conditional-class': someBool}"

This will add set-class to the element as a class:

v-bind:class="someString"

How do I mix these two syntaxes?

Tried:

v-bind:class="{'conditional-class': someBool}" v-bind:class="someString"

Result: Vue does not support duplicate binds

Tried:

v-bind:class="[someString, {'conditional-class': someBool}]"

Result: only adds 'conditional-class'. Even when the order is reversed.

Tried:

v-bind:class="{'conditional-class': someBool, someString: true}"

Result: treats someString name as a string, class becomes conditional-class someString

tony19 · Accepted Answer · 2022-07-15 04:33:07Z

You could use some ES2015 magic to create a computed property name:

:class="{'conditional-class': someBool, [someString]: true}"

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names

Alternatively, one of the things you've already tried should work:

:class="[someString, {'conditional-class': someBool}]"

This is explicitly documented here:

https://v2.vuejs.org/v2/guide/class-and-style.html#Array-Syntax

I tried older versions of Vue but it seems to have been supported for a long time.

Both techniques are demonstrated here:

new Vue({
  el: '#app',

  data () {
    return {
      someBool: true,
      someString: 'class2'
    };
  }
});

.class1 {
  border: 1px solid red;
  padding: 5px;
}

.class1::before {
  content: 'I have class1';
}

.class2 {
  background: #eef;
  margin: 5px;
}

.class2::after {
  content: ' & class2';
}

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <div :class="{class1: someBool, [someString]: true}"></div>
  <div :class="[someString, {class1: someBool}]"></div>
</div>

Randy Hall · Accepted Answer · 2019-06-20 19:40:45Z

0

Short answer

Use a computed:

v-bind:class="someComputed"

computed:{
    someComputed: function(){
        return (this.someBool ? "conditional-class" + " " : "") 
            + this.someString;
    }
}

But that's really the work-around if anyone else comes by scratching their head. OP is looking for a mix inside the binding, or a definitive "not this can't be done" from someone with the ability to be definitive.

answered Jun 20, 2019 at 19:40

Randy Hall

8,33723 gold badges87 silver badges175 bronze badges

Collectives™ on Stack Overflow

Bind conditional class and var class - VueJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related