I have a "Route (Model)" which has many "PickupRequest".

I made a component that displays all components as two lines of text. However, if it's the "currentRequest" (we go through each one one by one), I display another Livewire component.

In my modal, I want to sent the event to "RequestsList" in order to go to the next request and refresh the list to display the right request. The update is made in the DB, but the content of the page doesn't change.

Here is my code:

List:

<?php

namespace App\Http\Livewire\Routes;

use App\Models\PickupRequest;
use App\Models\Route;
use Livewire\Component;

class RequestsList extends Component
{
    public Route $route;
    public $requests;
    public PickupRequest $currentRequest;

    protected $listeners = ['nextRequest' => 'nextRequest'];

    public function mount() {
        $this->requests = $this->route->requestsWithDone;
    }

    public function booted() {
        $this->currentRequest = $this->route->requests()->first();
    }

    public function nextRequest() {
        $this->currentRequest = $this->route->requests()->first();
    }

    public function render()
    {
        return view('livewire.routes.requests-list');
    }
}
====
<div>
@livewire('routes.in-progress', ['request' => $currentRequest])

@foreach($requests as $request)
    @if($request->id != $currentRequest->id)
        <div  wire:key="r_{{ $request->id }}">
            <div >
                <h3 >{{ $request->user->short_address }}
                    <p >{{ $request->status_text }}</p>
                </h3>
                <p >{{ $request->user->special_instructions }}</p>
            </div>
        </div>
   @endif
@endforeach
</div>

InProgress:

<?php

namespace App\Http\Livewire\Routes;

use App\Models\PickupRequest;
use App\Models\Route;
use Livewire\Component;

class InProgress extends Component
{
    public PickupRequest $request;

    public function render()
    {
        return view('livewire.routes.in-progress');
    }
}
===
<div  wire:key="ip_{{ $request->id }}">
    <div >
        <h3 >{{ $request->user->short_address }}</h3>
        <p >{{ $request->user->special_instructions }}</p>
    </div>
    <div >
        <dl >
            <div >
                <dt >{{ __('routes.pickup.full_address') }}</dt>
                <dd >{{ $request->user->full_address }}</dd>
            </div>
            <div >
                <dt >{{ __('routes.pickup.special_instructions') }}</dt>
                <dd >{{ $request->user->special_instructions }}</dd>
            </div>
            <div >
                <dt >{{ __('routes.pickup.phone_number') }}</dt>
                <dd >{{ $request->user->phone }}</dd>
            </div>
            <div >
                <dt >{{ __('routes.pickup.bags') }}</dt>
            </div>
            <div >
                <x-button 
                          wire:click="$emit('openModal', 'routes.modal.couldnt-pickup', {{ json_encode(['pickup_id' => $request->id]) }})">
                            {{ __('routes.pickup.cant_pickup') }}
                </x-button>
                <x-button >{{ __('routes.pickup.add_bag') }}</x-button>
                <x-button >{{ __('routes.pickup.end') }}</x-button>
            </div>
        </dl>
    </div>
</div>

Modal (only PHP, the blade is irrelevant imo):

<?php

namespace App\Http\Livewire\Routes\Modal;

use App\Models\PickupRequest;
use Illuminate\Support\Facades\Gate;
use LivewireUI\Modal\ModalComponent;

class CouldntPickup extends ModalComponent
{
    public PickupRequest $pickup;

    public function mount($pickup_id)
    {
        $pickup = PickupRequest::findOrFail($pickup_id);

        Gate::authorize('update', $pickup);

        $this->pickup = $pickup;
    }

    public function update()
    {
        Gate::authorize('update', $this->pickup);

        if($this->pickup->is_active) {
            $this->pickup->couldnt_pickup_at = now();
            $this->pickup->save();
        }

        $this->emit('nextRequest');
        $this->closeModal();
    }


    public function render()
    {
        return view('livewire.routes.modal.couldnt-pickup');
    }
}

CodePudding user response：

If the current livewire component is not directly the children of the recipient of the Emit event you are sending then you should use

$this->emitUp('nextRequest');

To refresh the whole component after you have made the request without reloading the page then you should use the magic function $refresh, the details can be found here, https://laravel-livewire.com/docs/2.x/actions#magic-actions

protected $listeners = ['reloadContent' => '$refresh'];
$this->emit('reloadContent');

CodePudding user response：

The key is supposed to be on the top elements in the parent Livewire component. The key shouldn't be set in the component file in InProgress.