Shorthand :disabled does not work on Jetstream components.

[Christopher-Law]

Given the following code snippet

<div x-data="{
        disabled : true,
    }">

    <x-jet-button :disabled="disabled">Test</x-jet-button> // Throws 'Undefined Constant' Error
    
    <x-jet-button x-bind:disabled="disabled">Test</x-jet-button> //Works as expected

</div>

Using the short :disabled does not work on Jetstream components, while x-bind:disabled does.

[ekwoka]

Is the output html the same as shown here or is is transformed to something else?

[Christopher-Law]

This is a small example but still showcases the problem, my code has more to it. Is that what you were asking?

[SimoTod]

Alpine runs on your browser. x-jet-button is a Blade component. By the time it gets converted to HTML, that attribute gets removed because the shorthand : is used by Laravel Blade: https://laravel.com/docs/9.x/blade#passing-data-to-components

Also see https://laravel.com/docs/9.x/blade#escaping-attribute-rendering

[ekwoka]

As SimoTod helped clarify, I was asking about what code actually makes it to the browser itself. Like when you look in the devtools in the browser what does the element look like. Various processors may remove or otherwise modify attributes and make them not valid for alpine in certain configurations.

[Christopher-Law]

Thank you for your help @SimoTod . This issue can be closed.