Use Alpine data combined with laravel component props?

Hi, I have a little trouble using Alpine.js alongside a Laravel component. Here's the structure I have:

<body x-data="{ icon: 'github', title: 'GitHub' }">
    <div x-show="open">
        <div>
            <x-icon icon="icon" />
            <h3 x-text="title"></h3>
        </div>
    </div>
</body>

The icon component is supposed to receive a string that will be used to render an svg. It works fine if I provide this string manually, however I want to make it dynamic and use the icon property coming from Alpine, but it doesn't work.

I tried using the $data property as <x-icon icon="$data.icon" /> but without any luck. Does anyone know how can I make laravel components use Alpine.js properties?

Thank you!

leyduana

3 years ago

Best Answer

Level 8

You probably can't as mentioned also in this laracast thread: https://laracasts.com/discuss/channels/laravel/passing-javascript-variable-to-laravel-php but if you use Livewire, you can use @entangle https://laravel-livewire.com/docs/2.x/alpine-js#sharing-state

1 like

ruthback

3 years ago

Level 6

@leyduana It's good to know what some of the limitations for Alpine.js are, and coincidentally I was actually starting to think that Livewire might fit nicely in this type of situation. I've only glanced at it so this gives me the perfect excuse to take one of the courses.

Thank you for the help!

Please or to participate in this conversation.