Bootstrap modal Laravel Livewire隐藏带有单击事件的引导模式

我正在构建一个基于livewire的应用程序，我需要

wire：单击
event在livewire组件类中启动一个函数并打开一个引导模式

如果没有
连接：单击
事件，将打开引导模式

如果没有引导模式
id
，则
wire:click
事件可以正常工作

使用这两个选项，模态将打开，但会永远隐藏（不会被忽略），直到我重新加载页面后才能执行任何操作

默认情况下，当您使用
php artisan make:livewire--name
创建livewire时，视图部分带有
//comment
标记。因此，无论何时将模态放在
div
标记中，都会出现上述问题

但是，如果将模态放置在
div
标记之外，则其工作正常，但无法识别LIVEWIRE变量

我想知道

如果livewire不支持引导模式或与模式脚本冲突

如果一个事件不能同时触发两次（
wire:click
和default
click
事件）

为什么在livewire识别之前，将除外标记封装在
中

<a href="#" wire:click="edit({{ $file->id }})" class="mr-1 edit" data-toggle="modal" data-target="#editFileModal">
    <i class="align-middle fa fa-edit"></i>
</a>


您可以使用Alpine.js（Livewire附带的）启动
连接：单击
和模式切换。通过这样做，您甚至可以在打开模式之前收听
连线：单击
调用以完成，如果这更适合您的话

通过将
wire:ignore.self
添加到我的modal的根元素，为我修复了它

模态触发按钮

<button wire:click="updateModal({{ $item->id }})" type="button" class="btn btn-sm btn-label-brand btn-bold" data-toggle="modal" data-target="#updateModal"> Update</button>

更新

示例模态对话框

<div wire:ignore.self class="modal fade" id="kt_modal_1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient" class="form-control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient" wire:model="recipient">
          </div>
          <div class="form-group">
            <label for="message" class="form-control-label">Message:</label>
            <textarea class="form-control" id="message" wire:model="message"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>


新消息
收件人：
信息：
接近
发送消息
我对这件事感到困惑。我试着按照建议使用它，但没有一个单一的事件声音起作用。我已经根据Livewire文档添加了AlpineJS库，上面的代码似乎不适合我。