To pass a property to a Laravel blade component we can use one colon prefix :
. For example, given the following component:
<x-button :label="$name" />
On this button component, the label
property receives the value from the name
variable. But should we add some shorthand conditionals alpine property like :class="{ danger: isDeleting }"
?
How to inform Blade that the Alpine property is not a PHP expression?
You can pass Alpine JS data to Blade components usingĀ ::
. The double colon prefix informs Blade scaping the attribute rendering. See the example below:
<x-button :label="$name" ::class="{ danger: isDeleting }" />
The following HTML will be rendered by Blade:
<button :class="{ danger: isDeleting }"> Delete</button>