为什么jetstream modal总是设置为true并且关闭按钮不起作用答案

【问题标题】：Why the jetstream modal is always setting on true and the close button is not working为什么jetstream modal总是设置为true并且关闭按钮不起作用
【发布时间】：2021-09-05 22:41:25
【问题描述】：

我在 Jetstream 模式对话框中苦苦挣扎，这是我的代码：

在我的组件中，我有以下内容：

 public $ModalFormVisible=false;
 public function ShowReportModal()
{
    $this->ModalFormVisible=true;
}

在我的 Blade.php 中有：

 <div>
 <x-jet-button wire:click="ShowReportModal">{{ __('Reporter')}}</x-jet-button>
<x-jet-dialog-modal wire:model="ModalFormVisible">
<x-slot name="title">
    {{ __('Delete Account') }}
</x-slot>

<x-slot name="content">
    {{ __('Are you sure you want to delete your account?') }}

    <div class="mt-4" >
        <x-jet-input type="password" class="mt-1 block w-3/4" placeholder="{{ __('Password') }}"
                    x-ref="password"
                    wire:model.defer="password"
                    wire:keydown.enter="deleteUser" />

        <x-jet-input-error for="password" class="mt-2" />
    </div>
</x-slot>
<x-slot name="footer">
    <x-jet-secondary-button wire:click="$toggle('ModalFormVisible')" wire:loading.attr="disabled">
        {{ __('Cancel') }}
    </x-jet-secondary-button>


</x-slot>

所以问题是：

无论何时加载页面，都会显示模式，即使 ModalFormVisible 为 false。
取消按钮不起作用。
当我单击报告按钮时，它也不起作用。任何帮助将不胜感激。

【问题讨论】：

标签： laravel-livewire jetstream

【解决方案1】：

确保您的 livewire 组件只有一个根元素，并且所有内容都在其中。

【讨论】：