Child component, not updated

Hello network.

I'm working with Laravel, Livewire and Bootstrap. Following:

In the child component, I have a click event, which when triggered, retrieves a record from the database, dispatches an event and shows a modal, where there is a form for editing. In other words, all child components share this same form.

Child component:

<livewire:adm.legislations.public.specials-row :$legislation :key="$legislation->id" @deleted="delete({{ $legislation->id }})" @view="viewRow({{ $legislation->id }})" />

Parent component: // View Row public function viewRow(int $legislationId): void { if (!is_int($legislationId) || $legislationId <= 0) { throw new \InvalidArgumentException("O código de conduta informado é inválido."); }

    $this->authorize('view', Legislacao::class);

    $this->legislation = Legislacao_especiais::findOrFail($legislationId);

    $this->form->setSpecial($this->legislation);

    $this->dispatch('view');
}

public function update(): void
{
    $this->authorize('update', Legislacao::class);

    $this->form->update();

    $this->dispatch('close');

    unset($this->specials);

    $this->show = true;
}

#[Computed(persist: true)] protected function specials(): Collection { return Legislacao_especiais::orderBy('id', 'desc')->get(); }

The issue is that there is an extracted form, which updates the model, and gives a "refresh" to that model in the update function.

Extracted form: public function update(): void { $this->validate();

    $this->legislation->update([
        'legislacao' => $this->title,
        'url' => $this->url,
    ]);

    $this->legislation->refresh();
}

So far, so good, indeed, update the model in the bank.

My problem is after that, I dispatch an event to collapse the modal, then I destroy the cache, of the computed property "specials", with the idea of updating not only in the database, but also in the front end, but so far it does not update. I need to reload the page to do this.

@push('scripts') document.addEventListener('DOMContentLoaded', function () {

        var modal = new bootstrap.Modal('#special');

        document.addEventListener('view', () => {
            modal.show();
        });

        document.addEventListener('close', () => {
            modal.hide();
        });
    });
</script>

@endpush

I've already tried with resetPage from use WithPagination; In short, a child element updates in the database, but not on the front end. What can I do to solve this? If you have any other suggestions that go beyond the answer to this question, feel free to ask, we are always here to learn.

LaryAI

1 year ago

Level 58

The issue you're facing is a common one when dealing with Livewire components and dynamic updates. The problem seems to be that the frontend is not reflecting the changes made to the database without a page reload. Here are some steps and suggestions to ensure that your Livewire components update correctly:

Ensure Data Binding: Make sure that the data you want to update is properly bound to the Livewire component. If you're using a computed property like specials, ensure that it is being recalculated when necessary.
Use Livewire Events: After updating the model in the database, you can emit an event from the child component to the parent component to trigger a re-fetch of the data. This can be done using Livewire's event system.
Refresh the Component: You can use Livewire's $refresh method to refresh the component after the update. This will re-render the component and fetch the latest data.
Clear Cache: If you're using caching mechanisms, ensure that the cache is cleared or invalidated after the update.

Here's a possible solution using Livewire events:

Child Component

In your child component, after updating the model, emit an event to notify the parent component:

public function update(): void
{
    $this->validate();

    $this->legislation->update([
        'legislacao' => $this->title,
        'url' => $this->url,
    ]);

    $this->legislation->refresh();

    // Emit an event to notify the parent component
    $this->emit('legislationUpdated');
}

Parent Component

In your parent component, listen for the legislationUpdated event and refresh the data:

protected $listeners = ['legislationUpdated' => '$refresh'];

public function viewRow(int $legislationId): void
{
    if (!is_int($legislationId) || $legislationId <= 0) {
        throw new \InvalidArgumentException("O código de conduta informado é inválido.");
    }

    $this->authorize('view', Legislacao::class);

    $this->legislation = Legislacao_especiais::findOrFail($legislationId);

    $this->form->setSpecial($this->legislation);

    $this->dispatch('view');
}

JavaScript for Modal

Ensure your JavaScript is correctly handling the modal show/hide:

document.addEventListener('DOMContentLoaded', function () {
    var modal = new bootstrap.Modal('#special');

    document.addEventListener('view', () => {
        modal.show();
    });

    document.addEventListener('close', () => {
        modal.hide();
    });
});

Additional Suggestions

Debugging: Use dd() or dump() in your Livewire methods to ensure that the data is being updated as expected.
Console Logs: Add console logs in your JavaScript to ensure that events are being dispatched and received correctly.

By following these steps, you should be able to ensure that your Livewire components update correctly without needing a full page reload.

Please or to participate in this conversation.