在 Livewire 中发出事件时如何触发加载效果？答案

【问题标题】：How to trigger a loading effect when an event is emitted in Livewire?在 Livewire 中发出事件时如何触发加载效果？
【发布时间】：2022-01-23 01:26:01
【问题描述】：

我有一个向数据库添加新条目的模式。将其添加到数据库后，我使用发出的事件更新表 (HTML)，该事件会刷新保存表的组件。

但是，我想在表格中添加一个加载状态。我试过了，但在请求期间没有触发。

我怎样才能做到这一点？

如果需要，我可以使用 AlpineJS。

$this->emit('newTeamInvite');

<?php

namespace App\Http\Livewire\Team;

use Illuminate\Support\Collection;
use Livewire\Component;

class TeamInvites extends Component
{
    public Collection $invites;
    protected $listeners = ['newTeamInvite' => '$refresh'];

    public function render()
    {
        $this->invites = auth()->user()->company->team_invites->reverse();
        return view('livewire.team.team-invites');
    }
}

<div>
  <div class="flex flex-col">
    <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
      <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
        <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
          <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  {{ __('Name')}}
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  {{ __('Number of branches')}}
                </th>
                <th scope="col" class="relative px-6 py-3">
                  <span class="sr-only">{{ __('Cancel')}}</span>
                </th>
              </tr>
            </thead>
            <tbody>
              @foreach($invites as $invite)
                <tr class="@if($loop->even) bg-gray-50 @else bg-white @endif">
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    {{ $invite->email }}
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    {{ $invite->number_of_branches }}
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                    <a href="#" class="link">{{ __('Cancel')}}</a>
                  </td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<div wire:loading>
  Loading data...
</div>
</div>

【问题讨论】：

标签： laravel laravel-livewire

【解决方案1】：

我不确定此时加载状态是否可以针对触发的事件...我的意思是，如果可能的话。文档是指整个加载组件的行为或目标模型、属性、操作……但不是事件。当它通过 livewire 钩子触发事件并执行某些操作时，您可以管理什么。例如：

<div class="hidden" id="loading-container">
  Loading data...
</div>

<script>
Livewire.hook('message.sent', (message,component) => {
  if (message.updateQueue[0].payload.event === 'newTeamInvite') {
    $('#loading-container').removeClass('hidden');
  }
});

Livewire.hook('message.processed', (message,component) => {
  if (message.updateQueue[0].payload.event === 'newTeamInvite') {
    $('#loading-container').addClass('hidden');
  }
});
</script>

【讨论】：