Issue with Persisting reservationID in Livewire and Alpine.js

I'm currently working on a project using Livewire and Alpine.js and have run into an issue. I have a reservationID property in my Livewire component that I'm trying to sync with Alpine.js using the @entangle directive.

Here's what my Alpine.js code looks like:

<div x-data="{ reservationID: $persist(@entangle('reservationID')) }" x-init="$nextTick(() => { console.log(reservationID); })">
    <p x-text="reservationID"></p>
</div>

However, even though the in Alpine.js correctly displays the reservation ID, the $reservationID in my Livewire component is always null. I'm not sure why this is happening.

Here's the relevant part of my Livewire component:

public Reservation $reservation;

public ?int $reservationID = null;
public function checkReservation(): void
{
    if (!$this->reservationID) {
        $this->reservation = Reservation::create(['location_id' => 1,]);
        $this->reservationID = $this->reservation->id;
    } else {
        $this->reservation = Reservation::find($this->reservationID);
    }
}

I'm trying to persist the reservationID across page loads, but it seems to be lost. Could anyone provide any insight on what I might be doing wrong or any steps I can take to troubleshoot this issue?

Thanks in advance for your help!

vincent15000

1 year ago

Level 63

Hmmmm ... why do you need AlpineJS to display a reservation ID ?

<div>
    <p>{{ $reservationID }}</p>
</div>

WebSystem

1 year ago

Level 1

@vincent15000

The point is that the unset $reservationID in the component has an id that is in local storage

 public Reservation $reservation;

    public ?int $reservationID = null;

    public function mount(): void
    {
        $this->checkReservation();
    }

    public function render(): View
    {
        return view('livewire.form', [
            'locations' => $this->loadLocations,
        ]);
    }

    public function checkReservation(): void
    {
        dump($this->reservationID); // Null. In local storage is _x_reservationID 1

        if (!$this->reservationID) {

            $this->reservation = Reservation::create([
                'location_id' => 1,
            ]);

            $this->reservationID = $this->reservation->id;

        } else {
            $this->reservation = Reservation::find($this->reservationID);
        }
        dump($this->reservation);
    }

1 like

vincent15000

1 year ago

Level 63

@WebSystem Why do you need the localStorage ? Why not use the session intead ?

Can you explain the whole context of your application please ?

Please or to participate in this conversation.