Binding classes issue with AlpineJS - ternary operator and curly brackets

Question

EDIT: Due to the general syntax of AlpineJS, writing a ternary operator inside curly brackets is a mistake you may easily run into.

---

This is just a "grammar" issue but I really want to figure it out... Let's jump into it.

Everything is ok if I write:

:class="{ 'some_class': activeSlide == slide }"

On the contrary it doesn't work (i.e. 'some_class' is not added as a class) if I write:

:class="{ activeSlide == slide ? 'some_class' : '' }"

What's wrong with it?

(I don't think it's relevant, but you can have a look at the entire code here, inside 'template' tags: link)

Answer 1

The ternary operator works only with the non-object class syntax:

:class="activeSlide == slide ? 'some_class' : ''"

You can use the shorthand conditionals as well:

:class="activeSlide == slide && 'some_class'"