Laravel Livewire 隐藏带有点击事件的引导模式

Question

我正在构建一个基于 livewire 的应用程序，我需要wire:click事件来触发 livewire 组件类中的函数并打开 Bootstrap Modal。

如果没有该wire:click事件，Bootstrap Modal 将打开。

如果没有 Bootstrap Modal id，该wire:click事件就可以正常工作。

对于这两者，模态框会打开但永远隐藏（不会关闭），直到我重新加载页面才能执行任何操作。

默认情况下，当您使用 创建 livewire 时php artisan make:livewire --name，视图部件带有<div> //comment </div>标签。因此，每当将 Modal 放置在标签内时，div就会出现上述问题。

但是，如果将模态框放在标签之外，div它可以正常工作，但无法识别 LIVEWIRE 变量

我想知道;

如果 livewire 不支持 Bootstrap Modal 或者与 Modal 脚本有冲突。

如果一个事件不能同时触发两次（wire:click默认click事件）。

为什么除了标签被包含在<div> </div>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>

Answer 1

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

模态触发按钮。

<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>