CODEWITHSUNDEEP
alpine.js
karatecode
karatecode

Reputation: 584

Multiple ternery class bindings in Alpinejs

Whilst looping through some links, I would like to apply classes to a element based on two ternery conditions, eg:

<a 
    :class="route.cond1 === true ? 'bg-red-500' : 'bg-green-500'
    :class="route.cond2 === true ? 'text-blue-500' : 'text-purple-500'"
>
    CLICK
</a>

How can I do this?

Upvotes: 0

Views: 667

Answers (1)

Dauros
Dauros

Reputation: 10502

You can use the class object syntax to bind multiple classes:

<a :class="{'bg-red-500': route.cond1, 'bg-green-500': !route.cond1,
            'text-blue-500': route.cond2, 'text-purple-500': !route.cond2}">
    CLICK
</a>

Upvotes: 2

Related Questions