Conditional classes for blade components

[MaximVanhove]

Hi everyone, at our company we use blade components quite heavily. I think there is just one more improvement that would make the expercience better. Sometimes you want to add conditional classes to a blade component. On a regular element you would use the @class directive, but this is not possible on a blade component. Let's check some examples:

// This is perfectly possible, but does not feel right

<x-button class="button-large {{ $error ? 'button-red' :  '' }}"></x-button>

// This is also solves the issue, but it get's messy when a lot of conditionals are added

<x-button :class="'button-large ' . $error ? 'button-red' : ''"></x-button>

// This would be a great alternative, but throws the error:
// syntax error, unexpected token "endif", expecting end of file

<x-button @class(['button-large', 'button-red' => $error])></x-button>

Let's check one more alternative. In Vue you can bind objects to the class attribute and Vue will transform this to a string of classes. https://vuejs.org/guide/essentials/class-and-style.html#binding-html-classes

So how would this look like?

// This feels like the perfect solution to me, but alse throws an error:
// trim(): Argument #1 ($string) must be of type string, array given

<x-button :class="['button-large', 'button-red' => $error]"></x-button>

So technically this could be solved without breaking changes, what do you think?

[aguingand]

@class syntax works since v9.24 (#43140)

[MaximVanhove]

Thank you, I didn't know it was fixed. Time to update 😄