Is there a better way to do conditional classes?

[gavinhewitt]

Sorry if this has been asked before but could not find anything about this.

Currently, it seems, the only way do bind conditional classes is like so

:class="{ 'text-black border-black': section === 'steps', 'text-gray-400 border-transparent': section !== 'steps' }"

while it would be much nicer to have something like

:class="{ section === 'cover' ? 'text-black border-black' : 'text-gray-400 border-transparent' }"

Or did I miss some docs?

[ryangjchandler]

@gavinhewitt A ternary does work, you need to remove the curly braces from the expression though, otherwise it's like a weird object syntax.

:class="section === 'cover' ? 'text-black border-black' : 'text-gray-400 border-transparent'"

[gavinhewitt]

Ah thanks @ryangjchandler !! Did not think of removing the braces :-(

[umutyerebakmaz]

@gavinhewitt @ryangjchandler Both will work. Ternary function can be used for 2 different situations. If there are 3 or 4 possibilities, you can use curly brace and increase the options.

[burfbari]

If there are 3 or 4 possibilities, you can use curly brace and increase the options.

can you show how?
the following seems to not work for me:

<div 
  x-show="open"
  x-effect="if (open) setTimeout(function() {open = false}, 2000)"
  :class="
      if (status === 'success') {
          'my-2 p-2 text-sm bg-green-400 border-green-600 border-2 rounded-md text-white'
      } else if (status === 'error') {
          'my-2 p-2 text-sm bg-red-400 border-red-600 border-2 rounded-md text-white'
      } else {
          ''
      }
">

[ekwoka]

If you use statements, you need to return