CODEWITHSUNDEEP
javascriptvue.js
Rurohi53
Rurohi53

Reputation: 122

Vue js. Several classes with js

<div class="container" :class="{ qwerty: !open }" :class="lower? 'left' : 'right'">

Hi, why vue doesn't allow me to add several classes with conditions, like in example.
It allows to add one only.
How to implement this?

Upvotes: 1

Views: 49

Answers (3)

Pablo
Pablo

Reputation: 1682

Use Array Syntax.

:class="[lower ? 'left' : 'right', upper ? 'up' : 'down']"

Upvotes: 2

Amaarockz
Amaarockz

Reputation: 4674

If you have multiple conditions that goes too lengthy including too many logics then go with computed

<div class="container" :class="getClass">

then

computed: {
 getClass() {
  var className = 'container';
  if(!this.open) className = className+' '+'querty';

  if(this.lower) className = className+' '+'left';
  else className = className+' '+'right';

  return className;
 }
}

Upvotes: 1

B0BBY
B0BBY

Reputation: 1109

There are multiple ways to do this, but I think for you it should be enough to do this:

:class="[{qwerty: !open}, lower ? 'left' : 'right']"

it's a mix from passing an array of classes and passing objects

Upvotes: 1

Related Questions