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

Question

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

wire:click

事件来触发 livewire 组件类中的函数并打开 Bootstrap Modal。

如果没有

wire:click

事件，Bootstrap Modal 将打开。

如果没有 Bootstrap Modal

id

，

wire:click

事件就可以正常工作。

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

默认情况下，当您使用

php artisan make:livewire --name

创建 livewire 时，视图部分带有

<div> //comment </div>

标签。因此，每当将 Modal 放置在

div

标签内时，就会出现上述问题。

但是，如果将模态框放在

div

标签之外，它可以正常工作 但无法识别 LIVEWIRE 变量

我想知道；

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

如果一个事件不能同时触发两次（

wire:click

和默认

click

事件）。

为什么在 Livewire 识别之前，除了标签被包含在

<div> </div>

内。

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

Answer 3

我遇到了完全相同的问题，这是我的解决方案：

我没有使用属性 data-target="#myModal" 在单击按钮时显示 myModal，而是使用wire:click 函数来执行此操作。即：

<button class="btn btn-sm btn-danger" wire:click.prevent="myFunction({{$some_id}})">...</button>

在 myFunction 中，做任何你想做的事情，然后添加：

$this->dispatchBrowserEvent('openModal', ['someParameter' => 'some value']);

在视图文件中，添加：

<script>
window.addEventListener('openModal', event => {
$('#myModl').modal('show');
//alert('parameter: ' + event.detail.someParameter);
})
</script>

请参阅 https://laravel-livewire.com/docs/2.x/events#browser 了解更多信息

Answer 4

在控制器函数中，在函数末尾添加

$this->skipRender();

。 如果您更改 livewire 控制器中的任何变量值，它将自动重新渲染整个页面。函数skipRender将停止livewire渲染页面。