所以我正在创建一个完整的页面livewire路由，路由正在工作，页面正确加载。在我的页面上，我有一个livewire组件，允许Jetstream模式对话框打开一个表单。这很好，相关的表单按预期打开，可以在外部单击关闭或单击关闭按钮。
然而，在这样做之后，我不能在我的页面上做任何事情。指针不会改变，我无法对页面做任何事情，直到我重新加载页面。显然，这是不可取的，并且违背了在页面中使用livewire的全部意义。我的add组件实际上打开了页面上6个模态中的一个，所以也许这可以重构?在我的标准非livewire页面上，这个问题不会发生!
代码很长，为了简洁起见，我将展示AddButton组件和ManageClientModal组件，尽管其他模态的工作方式相同。
AddButton.php:
<?php
namespace AppHttpLivewireTools;
use LivewireComponent;
class AddButton extends Component
{
public bool $showUser = false;
public bool $showClient = false;
public bool $showMerchant = false;
public bool $showJob = false;
public bool $showHoliday = false;
public function mount()
{
$this->showUser = auth()->user()->can( 'manage users' );
$this->showClient = auth()->user()->can( 'manage clients' );
$this->showMerchant = auth()->user()->can( 'manage merchants' );
$this->showJob = auth()->user()->can( 'manage jobs' );
$this->showHoliday = true;
}
public function render()
{
return view('livewire.tools.add-button');
}
public function showUserModal( $user_id, $delete )
{
$this->emit('showUserModal', $user_id, $delete);
}
public function showClientModal( $client_id, $delete )
{
$this->emit('showClientModal', $client_id, $delete);
}
public function showMerchantModal( $merchant_id, $delete )
{
$this->emit('showMerchantModal', $merchant_id, $delete);
}
public function showJobModal( $job_number, $delete )
{
$this->emit('showJobModal', $job_number, $delete);
}
public function showHolidayModal( $holiday_id, $delete )
{
$this->emit('showHolidayModal', auth()->id(), $holiday_id, $delete);
}
}
和add-button.blade.php:
<div class="relative" x-data="{ open: false }" @click.away="open = false" @close.stop="open = false">
<div @click="open = ! open">
<div class="hidden space-x-8 md:-my-px md:ml-10 lg:flex">
<button type="button" class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-blue-400 py-2 px-4 border border-blue-500 hover:border-transparent rounded">
{!! config( 'ecl.ADD_SUCCESS' ) !!} {{ __( 'Add' ) }}
</button>
</div>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute z-50 mt-2 w-48 rounded-md shadow-lg origin-top-right right-0 " style="display: none;" @click="open = false">
<div class="rounded-md ring-1 ring-black ring-opacity-5 py-1 bg-white">
<!-- Account Management -->
<div class="block px-4 py-2 text-xs text-gray-400">
Add Actions
</div>
@if( $showJob )
<a class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition" wire:click="showJobModal(0, 0)">{!! config( 'ecl.JOBS' ) !!} {{ __( 'Add A Job' ) }}</a>
@endif
@if( $showClient )
<a class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition" wire:click="showClientModal(0, 0)">{!! config( 'ecl.CLIENTS' ) !!} {{ __( 'Add A Client' ) }}</a>
@endif
@if( $showMerchant )
<a class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition" wire:click="showMerchantModal(0, 0)">{!! config( 'ecl.MERCHANTS' ) !!} {{ __( 'Add A Merchant' ) }}</a>
@endif
@if( $showUser )
<a class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition" wire:click="showUserModal(0, 0)">{!! config( 'ecl.USERS' ) !!} {{ __( 'Add A User' ) }}</a>
@endif
@if( $showHoliday )
<a class="block px-4 py-2 text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition" wire:click="showHolidayModal(0, 0)">{!! config( 'ecl.PLANE' ) !!} {{ __( 'Add A Holiday' ) }}</a>
@endif
</div>
</div>
@livewire('modals.manage-job', ['showButton' => false])
@livewire('modals.manage-client', ['showButton' => false])
@livewire('modals.manage-merchant', ['showButton' => false])
@livewire('modals.manage-user', ['showButton' => false])
@livewire('modals.add-holiday', ['showButton' => false])
</div>
我ManageClient.php:
<?php
namespace AppHttpLivewireModals;
use AppModelsClient;
use LivewireComponent;
class ManageClient extends Component
{
public bool $showingModal = false;
public bool $showButton = true;
public int $delete = 0;
public string $header;
protected $listeners =[
'refresh' => '$refresh',
'showClientModal' => 'showClientModal'
];
public function render()
{
return view('livewire.modals.manage-client');
}
public function submit()
{
if ( $this->delete === 0 ) {
$this->adder = false;
} else {
//$this->adder = $this->adder;
}
$this->hideModal();
}
public function showClientModal( $clientId, $delete )
{
$this->delete = $delete;
$this->client_id = $clientId;
if ( $clientId > 0 ) {
$client = Client::find( $clientId );
$this->header = 'Edit the Client';
$this->adder = false;
} else {
$this->header = 'Add a Client';
$this->adder = true;
}
if ( $delete ) {
$this->header = 'Delete this Client';
}
$this->showingModal = true;
}
public function hideModal()
{
$this->showingModal = false;
}
}
和manage-client.blade.php:
<span>
@if($showButton)
@endif
<form wire:submit.prevent="submit()">
<x-dialog-modal wire:model="showingModal" maxWidth="2xl" class="flex items-center">
<x-slot name="title">
{{ $header }}
</x-slot>
<x-slot name="content">
@if( $delete === 0 )
<div class="md:col-span-1 flex justify-between">
<div class="px-4 sm:px-0">
<h3 class="text-lg font-medium text-gray-900">Client Information</h3>
<p class="mt-1 text-sm text-gray-600">
Please complete the fields to manage the Client.
</p>
</div>
</div>
@else
<p>Click Yes if you would like to remove the following client or No to leave it alone:</p>
<p class="bg-gray-200 dark:!bg-gray-800">{{ $title }}</p>
<p> A deleted comment cannot be restored!</p>
<br><hr>
<p>Are you sure you want to delete this comment?</p>
@endif
</x-slot>
<x-slot name="footer">
@if ( $delete === 0 )
<x-button class="mx-2" type="submit">
{{ __('Submit') }}
</x-button>
<x-secondary-button wire:click="$set('showingModal', false)" wire:loading.attr="disabled">
{{ __('Cancel') }}
</x-secondary-button>
@else
<x-button class="mx-2" type="submit">
{{ __('Yes') }}
</x-button>
<x-secondary-button wire:click="$set('showingModal', false)" wire:loading.attr="disabled">
{{ __('No') }}
</x-secondary-button>
@endif
</x-slot>
</x-dialog-modal>
</form>
</span>
只是重申一下，问题不在于路由，因为页面加载并按预期工作，直到一个模态被打开然后关闭。即使提交也会这样做，并且似乎在整个页面上留下透明的覆盖!我认为，也许一些刷新从AddButton会解决这个问题，并尝试使用javascript，但唯一的方法来获得访问处理任何模态后的页面是重新加载页面!
我猜你并没有真正隐藏你的模态，你只是删除了模态中的show类。我认为你需要触发一个hideModal事件。
public function hideModal()
{
$this->showingModal = false;
$this->emit('hideModal', 'your-modal-id');
}
然后，在父组件中添加javascript:
<script>
Livewire.on('hideModal',(modalId)=>{
$('#' + modalId).modal('hide');
});
</script>