CODEWITHSUNDEEP
vue.js
Dmitry Bubnenkov
Dmitry Bubnenkov

Reputation: 9859

How to add default class on :class?

I have following code:

<div class="LngList" v-for="(lang, index) in languages">
  <button @click="clickOnLanguage(lang.lang, index)" :class="{'ui negative basic button' : lang.isClicked }">{{lang.lang}}</button>
</div>

It's setting class to ui negative basic button if lang.isClicked is true. But how can I add some classes if the value is false?

Upvotes: 2

Views: 2942

Answers (3)

Yoihito
Yoihito

Reputation: 378

To set default classes you can also do:

<button 
  class="default-class" 
  @click="clickOnLanguage(lang.lang, index)" 
  :class="{'ui negative basic button' : lang.isClicked }"
>
  {{lang.lang}}
</button>

Upvotes: 1

Hexodus
Hexodus

Reputation: 12927

The easiest way to have default classes is just to set the condition to true like this:

:class="{'conditional-classes' : lang.isClicked, 'default-classes': true }"

Upvotes: 0

Bert
Bert

Reputation: 82449

Add a property to your class binding that represents the classes you want to show when lang.isClicked is false. Then use !lang.isClicked.

:class="{'ui negative basic button' : lang.isClicked, 'other class': !lang.isClicked }"

Upvotes: 2

Related Questions