Laravel Jetstream模态关闭无法按预期工作，并且有错误

Question

我是Laravel Jetstream的新手，并且正在尝试将其构建在模态组件中使用。我已经创建了一个按钮，该按钮将打开模式供用户编辑信息。在打开模态，保存等方面，一切都很好，但是当我设置电线时：型号为false时，它会产生一堆错误，使我不知道发生了什么，除非我刷新，否则组件上的所有内容都是无光的。

以下是我的代码

index.blade.php

<div>
 <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <livewire:church.church-add-form />

            <div class="flex flex-col">
                <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
                    <div class="py-2 inline-block min-w-full sm:px-6 lg:px-8">
                        <div class="overflow-x-auto">
                            <table class="min-w-full">
                                <thead class="bg-gray-50 border-b">
                                <tr>
                                    <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
                                        Church Name
                                    </th>
                                    <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
                                        Region
                                    </th>
                                    <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">
                                        Action
                                    </th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($churches as $church)
                                    <tr class="bg-white border-b transition duration-300 ease-in-out hover:bg-gray-100">
                                        <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                            {{$church->name}}
                                        </td>
                                        <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                            @foreach ($regions as $region)
                                                @if ($region->id == $church->region_id)
                                                    {{ $region->name }}
                                                @endif
                                            @endforeach
                                        </td>
                                        <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap">
                                            <x-jet-button class="bg-blue-500" wire:click="edit({{$church}})">Edit</x-jet-button>
                                            <x-jet-button class="bg-red-500" wire:click="delete({{$church}})">Delete</x-jet-button>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-5">
                            {{ $churches->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <x-jet-dialog-modal wire:model="showEditModal">
            <x-slot name="title">
                Edit Church
            </x-slot>

            <x-slot name="content">
                <div>
                    <x-jet-label for="name" value="{{ __('Church Name') }}" />
                    <x-jet-input id="name" class="block mt-1 w-full" type="text" name="name" wire:model.defer="state.name" required/>
                    @error('name')
                    <p class="text-red-500">{{$message}}</p>
                    @enderror
                </div>

                <div class="mt-5">
                    <x-jet-label for="region" value="{{ __('Region') }}" />
                    <select class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm block mt-1 w-full" aria-label="region-select" wire:model="state.region_id">
                        @foreach($regions as $region)
                            <option value="{{$region->id}}">{{$region->name}}</option>
                        @endforeach
                    </select>
                </div>

            </x-slot>

            <x-slot name="footer">
             <x-jet-secondary-button wire:click="$set('showEditModal', false)" wire:loading.attr="disabled">
                Close
            </x-jet-secondary-button>
                <x-jet-button class="ml-2" wire:click="updateChurch" wire:loading.attr="disabled">
                    Save
                </x-jet-button>
            </x-slot>
        </x-jet-dialog-modal>
</div>

索引组件

public $showEditModal = false;

public function edit(Church $church)
    {
        $this->showEditModal = true;
    }

app.blade.php

<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">


        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])

    </head>

以下是我单击关闭时的错误。

Answer 1

wire:click="$set('showEditModal', false)"

是正确的。

    public function edit(Church $church)
        {
            $this->showEditModal = true;
            $this->church = $church;
        }
    
    public function close()
        {
            $this->showEditModal = false;
            $this->church = null;
        }
    public function mount()
        {
            $this->Church = new Church(); // if your model name is Church
        }

Answer 2

我发现了这个问题，显然，来自Livewire的Alpine.js和@PowerGridScripts的Alpine.js之间存在冲突，一旦我发表评论，每个人都可以正常工作。

        @livewireScripts
{{--        @powerGridScripts--}}