hot-tip-pass-alpine-js-bound-attributes-to-blade-component.md

Pass Alpine.js Bound Attributes To Blade Component

If you need to pass a bound Alpine.js attribute to a Laravel Blade component, you can prefix the attribute name with two colons instead of a single colon to tell Blade to not evaluate the attribute as a PHP expression.

<div x-data="{ isActive: true }">
    <x-some-blade-component ::is-active="isActive" />
</div>

I've been looking for this the whole day.

Thank you very much.

What a life saver!!!! Can't find this solution anywhere at all!! Just stumbled upon this after LOTS and LOTS of looking. Thank you so much for posting this!

Hi how do you read is-active variable data inside component?

Hmm this doesn't seem to work. The some-blade-component component won't receive the actual value coming from Alpinejs.

Please replay if it did work for you.

** If the reason is just to let Laravel component to ignore the attribute for the sake of Alpinejs, then you always could use the full bind attribute provided by Alpine, x-bind:is-active="..".

Hmm this doesn't seem to work. The some-blade-component component won't receive the actual value coming from Alpinejs.

Please replay if it did work for you.

** If the reason is just to let Laravel component to ignore the attribute for the sake of Alpinejs, then you always could use the full bind attribute provided by Alpine, x-bind:is-active="..".

Doesn't seem to work for me either :-(

TLDR;

<div x-data="{ isActive: true }">
    <x-some-blade-component is-active="isActive" />
</div>

<button :disabled="{{ $attributes->get('is-active') }}">

</button>

---

As the blade gets compiled before the javascript is activated, you get your html ready. At this point, your components are expanded within the html. Only after that the Alpine gets run. That means as long as you have the binding on your component, it will work.

So to summarise, your compiled blade gets turned into this:

<div x-data="{ isActive: true }">
    <button is-active="isActive"></button>
</div>

at this moment, alpine doesn't know if it's component or not anyways, so just having the attribute will make it accessible by the Alpine.

In case you are wondering, the solution is right from the laravel docs here
Escaping Attribute Rendering