Блог

По сути, я использую @entangle для совместного использования состояния между моим компонентом Livewire и моим компонентом Alpine.

 <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>
  

Это мой компонент Livewire:

 <?php

namespace AppHttpLivewireMixUser;

use AppModelsMix;
use IlluminateSupportFacadesAuth;
use LivewireComponent;
use LivewireWithPagination;

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)
        ]);
    }
}
  

Это ошибка, которую я получаю на консоли:

Ошибка неперехваченной ссылки: ShowModal не определен при оценке (оценка при saferEval (alpine.js?df24:1701), :3:36) при saferEval (alpine.js?df24:112) при Component.evaluateReturnExpression (alpine.js?df24:1581) при оценке (alpine.js?df24:1557) в Array.forEach () в Component.resolveBoundAttributes (alpine.js?df24:1530) в Component.initializeElement (alpine.js?df24:1446) при оценке (alpine.js?df24:1430) при оценке (alpine.js?df24:1420) при обходе (alpine.js?df24:84)

Я не знаю, что здесь может произойти, я использую свойства @entangle, как это делают документы Livewire. https://laravel-livewire.com/docs/2.x/alpine-js#extracting-blade-components

Когда вы @entangle создаете свойство в AlpineJS, вы создаете ссылку из своего свойства Alpine на другое свойство в вашем компоненте Livewire.

Ваша проблема находится в верхней части вашего модального определения в вашем x-data объявлении.

Если вы используете x-data="{ open: @entangle('showModal') }" , ваше showModal свойство будет привязано к alpine с именем open .

Вам нужно только изменить имя вашего определения:

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

Вы пытаетесь установить и оценить свою переменную livewire showModal , когда вы должны устанавливать и оценивать свойство, которое вы задаете с помощью Alpine, которое есть open .

Попробуйте:

 
<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>