与@entangle 共享 Livewire 和 Alpinejs 之间的状态时未定义 showModal

Question

基本上我使用@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 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)
        ]);
    }
}

这是我在控制台遇到的错误：

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)

我不知道我会在这里发生什么，我像 Livewire 文档一样使用 @entangle 属性。 https://laravel-livewire.com/docs/2.x/alpine-js#extracting-blade-components

Answer 1

您正在尝试设置和评估您的 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>

Answer 2

当你在 AlpineJS 中 @entangle 一个属性时，你正在从你的 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>

与@entangle 共享 Livewire 和 Alpinejs 之间的状态时未定义 showModal

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

laravel

laravel-livewire

alpine.js