Conditionally adding a CSS class in Vue

Question

Just started with Vue so I can't get this simple thing working. All I'm trying to do is toggle a class based on a condition.

<button type="button" 
        class="btn dropdown-toggle" 
        v-bind:class="{ btn-default: (search.category != 'all') }">
    {{ filterCategoryText || 'Category' }}
</button>

Answer 1

Firstly, as you discovered, you should probably remove the duplicate class definition. You can mix static and dynamic classes in the bound class definition. (If you leave the duplicate there it still works, though)

Then, you have the choice...

Object syntax

// property names will be in the class list if their values are truthy
:class="{ 
    'btn-default': search.category != "all", 
    'btn' : true, 
    'dropdown-toggle' : true 
}"

Array syntax

// an item in the array becomes a class in the class list
:class="[
    search.category != 'all' ? 'btn-default':'',
    'btn',
    'dropdown-toggle'
]"

Simple expression

// if you only have one item, just use a simple expression
:class="search.category != 'all' ? 'btn-default':''"

Docs are here

Answer 2

Figured it:

<button type="button" 
        :class="[(search.category) ? '' : 'btn-default', 'btn dropdown-toggle']"
    {{ filterCategoryText || 'Category' }}
</button>