Alpine.js - Passing javascript variable to Livewire

Question

I have a simple Livewire component called index.blade.php. All it does currently is render below:

<div x-data>
    <div x-text="JSON.stringify($store.data.entities)"></div>
</div>

The data above comes from my app.js file:

Alpine.store('data', {
    entities: [{'type': 'order', 'reference': '12345678'}],
})

Thus in my component, the following will be rendered:

[{"type":"order","reference":"12345678"}]

This works fine. However, I want to pass the value of $store.data.entities to another Livewire component:

<div x-data>
    <div x-text="JSON.stringify($store.data.entities)"></div>
    <!-- Show specific entity -->
    @livewire('show-entity', [])
</div>

However, I am not sure how I can pass the $store.data.entities as a parameter to show-entity component?

Yinci · Accepted Answer · 2022-10-27 09:22:54Z

0

If you are using Livewire 2 or above, you can use $wire.

Move the div inside your Livewire component, then simply:

<div x-data="{'entities': JSON.stringify($store.data.entities)}" x-text="entities" x-init="$wire.set('entities', entities')"></div>

Upon init of Alpine, it should set the Livewire variable (called $entities in this example) to the value of your JSON.

answered Oct 27, 2022 at 9:22

Yinci

2,5901 gold badge5 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1