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

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

未捕获的ReferenceError：未定义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

Answer 1

当您在@entangle中使用AlpineJS的属性时，您是在 Alpine属性中引用 Livewire组件中的另一个属性。

您的问题在x-data声明中，是模式定义的顶部。

如果您使用x-data="{ open: @entangle('showModal') }"，则您的showModal属性将绑定到名称为open的高山内部。

您只需要更改定义名称：

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

Answer 2

您应该在设置和评估通过Alpine设置的属性showModal时设置和评估带电变量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>

使用@entangle在Livewire和Alpinejs之间共享状态时，未定义showModal

2 个答案: