showModal is not defined when sharing State Between Livewire And Alpinejs with @entangle

Question

Basically I'm using the @entangle to share the state between my Livewire component and my Alpine component.

<div x-data="{ open:@entangle('showModal') }" @keydown.escape="showModal=false">
            <button type="button" class="block p-2 btn-light-green" @click="showModal=true">Añadir Mezcla</button>

            <!--Overlay-->
            <div class="overflow-auto" style="background-color: rgba(0,0,0,0.5)" x-show="showModal" :class="{ 'absolute inset-0 z-10 flex items-center justify-center': showModal }">
                <!--Dialog-->
                <div class="bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg py-4 text-left px-6"
                     x-show="showModal"
                     @click.away="showModal=false"
                     x-transition:enter="ease-out duration-300"
                     x-transition:enter-start="opacity-0"
                     x-transition:enter-end="opacity-100"
                     x-transition:leave="ease-in duration-300"
                     x-transition:leave-start="opacity-100"
                     x-transition:leave-end="opacity-0">

                    <!-- Title -->
                    <div class="flex justify-between items-center mb-3">
                        <p class="text-xl font-bold">Añadir una mezcla</p>
                        <div class="cursor-pointer z-50" @click="showModal=false">
                            <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                                <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
                            </svg>
                        </div>
                    </div>

                    <!-- Content -->
                    <livewire:mix.user.create-mix-form/>
                </div>
                <!-- /Dialog -->
            </div>
            <!-- /Overlay -->
        </div>

This is my Livewire Component:

<?php

namespace App\Http\Livewire\Mix\User;

use App\Models\Mix;
use Illuminate\Support\Facades\Auth;
use Livewire\Component;
use Livewire\WithPagination;

class ShowUserMixes extends Component
{
    use WithPagination;

    protected $listeners = [
        'deletedMix' => 'render',
        'addedMix' => 'render'
    ];

    public $showModal = false;

    public function closeModal()
    {
        $this->showModal = false;
    }

    public function deleteUserMix($mix_id, $user_id)
    {
        if (Auth::user()->id !== $user_id) {
            return false;
        }

        $mix = Mix::find($mix_id);
        $mix->delete();
        $this->emitSelf('deletedMix');
    }

    public function render()
    {
        return view('livewire.mix.user.show-user-mixes', [
            'mixes' => Auth::user()->mixes()->where('active', 1)->paginate(10)
        ]);
    }
}

This is the error I'm getting at the console:

Uncaught ReferenceError: showModal is not defined at eval (eval at saferEval (alpine.js?df24:1701), :3:36) at saferEval (alpine.js?df24:112) at Component.evaluateReturnExpression (alpine.js?df24:1581) at eval (alpine.js?df24:1557) at Array.forEach () at Component.resolveBoundAttributes (alpine.js?df24:1530) at Component.initializeElement (alpine.js?df24:1446) at eval (alpine.js?df24:1430) at eval (alpine.js?df24:1420) at walk (alpine.js?df24:84)

I don't know what might me happening here, I'm using the @entangle properties as the Livewire docs do. https://laravel-livewire.com/docs/2.x/alpine-js#extracting-blade-components

Answer 1

When you @entangle a property in AlpineJS, you're making a reference form your Alpine Property to another property in your Livewire Component.

Your issue is at the top of your modal definition, in your x-data declaration.

If you use x-data="{ open: @entangle('showModal') }", your showModal property will be bound inside alpine with the name open.

You only need to change the name of your definition:

<div
    x-data="{ showModal: @entangle('showModal') }"
    <!-- Other attributes here -->
>
    <!-- Your modal goes here -->
</div>

Answer 2

You are trying to set and evaluate your livewire variable showModal when you should be setting and evaluating the property you set with Alpine which is open.

Try:

<div x-data="{ open:@entangle('showModal') }" @keydown.escape="open=false">
            <button type="button" class="block p-2 btn-light-green" @click="open=true">Añadir Mezcla</button>

            <!--Overlay-->
            <div class="overflow-auto" style="background-color: rgba(0,0,0,0.5)" x-show="open" :class="{ 'absolute inset-0 z-10 flex items-center justify-center': open }">
                <!--Dialog-->
                <div class="bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg py-4 text-left px-6"
                     x-show="open"
                     @click.away="open=false"
                     x-transition:enter="ease-out duration-300"
                     x-transition:enter-start="opacity-0"
                     x-transition:enter-end="opacity-100"
                     x-transition:leave="ease-in duration-300"
                     x-transition:leave-start="opacity-100"
                     x-transition:leave-end="opacity-0">

                    <!-- Title -->
                    <div class="flex justify-between items-center mb-3">
                        <p class="text-xl font-bold">Añadir una mezcla</p>
                        <div class="cursor-pointer z-50" @click="open=false">
                            <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                                <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
                            </svg>
                        </div>
                    </div>

                    <!-- Content -->
                    <livewire:mix.user.create-mix-form/>
                </div>
                <!-- /Dialog -->
            </div>
            <!-- /Overlay -->
        </div>