Laravel Livewire 使用点击事件隐藏引导模式

Question

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

没有wire:click 事件，引导模式打开。

没有引导模式id，wire:click 事件就可以正常工作。

使用这两者时，Modal 会打开但永远隐藏（不会关闭），直到我重新加载页面才能执行任何操作。

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

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

我想知道；

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

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

为什么在 livewire 识别之前，<div> </div> 中包含了 except 标签。

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

Answer 2

您可以使用 Alpine.js（Livewire 附带）来触发 wire:click 和模态的切换。通过这样做，您甚至可以在打开模式之前收听 wire:click 调用以完成，如果这更适合您的话。

<a href="#" x-on:click="$wire.edit({{ $file->id }}); $('#editFileModal').modal('show');" class="mr-1 edit">
    <i class="align-middle fa fa-edit"></i>
</a>