apply dynamic CSS class from a computed in vue.js on top of other conditional classes

Question

I have this div in my Field.vue component template:

<div class="field"
    :class="{
      'has-bomb': field.hasBomb && field.isOpen,
      'is-open': field.isOpen,
      'is-marked': field.isMarked
    }"></div>

Now I have a computed that creates a String based on field.x and field.y like this:

computed: {
  cssClass () {
    return `x${this.field.x}-y${this.field.y}`
  }
}

How can I add that generated String as a CSS class to my div?

I tried

<div class="field"
    :class="{
      'has-bomb': field.hasBomb && field.isOpen,
      'is-open': field.isOpen,
      'is-marked': field.isMarked,
      cssClass
    }"></div>

and also

<div class="field"
    :class="{
      'has-bomb': field.hasBomb && field.isOpen,
      'is-open': field.isOpen,
      'is-marked': field.isMarked,
      cssClass: true
    }"></div>

but that just gives me

<div class="field cssClass"></div>

instead of what I need, e.g.:

<div class="field x3-y10"></div>

try <div class="field" :class="{ 'has-bomb': field.hasBomb && field.isOpen, 'is-open': field.isOpen, 'is-marked': field.isMarked, this.cssClass() }"></div> — victor
– victor, Commented Jan 26, 2018 at 20:26
Error compiling template: - invalid expression: Unexpected token } in { 'has-bomb': field.hasBomb && field.isOpen, 'is-open': field.isOpen, 'is-marked': field.isMarked, cssClass() } changes to ´Unexpected token :` when I try cssClass(): true — connexo
– connexo, Commented Jan 26, 2018 at 20:33

tony19 · Accepted Answer · 2022-07-15 20:28:32Z

10

For this approach, Vue provides so called the Array Syntax class binding, which allow using static or dynamic classes inside an array which is passed to the dynamic html attribute.

For example:

<div :class="['static-class', computedClass, {'dynamic': obj.enabled}]">Test</div>

**REQUIRED IN COMMENTS by @webnoob:** It is also good to know that is possible to use both pure html `class` with vue dynamic `:class` even though in HTML is not valid to use 2 same attributes ([read more in specifications][2]), moreover, nowadays if you try to use multiple same attributes, browsers will just ignore them. But in our case with vue it works because all the dynamic classes will be merged together with the static ones and at the end the element will contain only one class attribute.

Working example:

<div :class="myClass" class="row">Test</div>

But is not possible to use two of the same style (i.e. two dynamic or two static)

Not working example:

<div class="a" class="b"></div> or <div :class="a" :class="b"></div>

This generates errors.

edited Jul 15, 2022 at 20:28

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 26, 2018 at 20:29

V. Sambor

13.4k6 gold badges51 silver badges68 bronze badges

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

3 Comments

connexo Over a year ago

In my case the content of cssClass is dynamic, not the condition, like in your example obj.enabled.

V. Sambor Over a year ago

you can use static, or dynamic with this syntax... please check I've updated the answer.

connexo Over a year ago

:class="[     {       'has-bomb': field.hasBomb && field.isOpen,       'is-open': field.isOpen,       'is-marked': field.isMarked,     }, cssClass]"

does the job. Thanks for pointing out!

Collectives™ on Stack Overflow

apply dynamic CSS class from a computed in vue.js on top of other conditional classes

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related