Need help to understand why sometimes the data of my table is lost after a function and I need to force query again the posts

[joffreypersia]

Hi,

I have a parent LV component where I would like to display a table of Users of my app :

<?php

namespace App\Livewire\Users;

use Flux\Flux;
use App\Models\User;
use App\Enums\UserRole;
use Livewire\Component;
use Illuminate\Validation\Rule;
use Illuminate\Support\Facades\Auth;

class Show extends Component
{
    public $users;
    public $name;
    public $email;
    public UserRole $role;

    public function mount()
    {
        $this->users = User::all();
    }

    public function deleteUser($id)
    {
        $user = User::findOrFail($id);
        $user->delete();
        $this->users = User::all(); // IF I remove this line, my table is empty after the delete

        Flux::modal('delete-user')->close();
        $this->dispatch('alert', ['title' => 'L\'utilisateur a bien été supprimé', 'type' => 'success']);
    }

    public function render()
    {
        return view('livewire.users.show', [
            'roles' => UserRole::cases(),
        ]);
    }
}

The view

<div>
    <flux:table>
        <flux:columns>
            <flux:column>ID</flux:column>
            <flux:column>Nom</flux:column>
            <flux:column>Email</flux:column>
            <flux:column>Rôle</flux:column>
            <flux:column>Date de création</flux:column>
            <flux:column>
                <span class="sr-only">Actions</span>
            </flux:column>
        </flux:columns>

        <flux:rows>
            @foreach($users as $user)
                <livewire:user-row :user="$user" :key="$user->id" />
            @endforeach
        </flux:rows>
    </flux:table>
    ...
</div>

The UserRow.php

<?php

namespace App\Livewire;

use App\Models\User;
use App\Models\Course;
use App\Enums\UserRole;
use Livewire\Component;
use Illuminate\Validation\Rule;

class UserRow extends Component
{
    public User $user;
    public $name;
    public $email;
    public UserRole $role;

    public function mount(User $user)
    {
        $this->user = $user->load('courses');
        $this->name = $user->name;
        $this->email = $user->email;
        $this->role = $user->role;
    }

    public function delete()
    {
        $this->modal('delete-user')->show();
    }

    public function render()
    {
        return view('livewire.user-row', [
            'roles' => UserRole::cases(),
        ]);
    }
}

And the view :

<flux:row>
    <flux:cell>{{ $user->id }}</flux:cell>
    <flux:cell variant="strong" wire:click="edit" class="cursor-pointer">{{ $user->name }}</a></flux:cell>
    <flux:cell>{{ $user->email }}</flux:cell>
    <flux:cell><flux:badge size="sm" color="{{ $user->role->color() }}" inset="top bottom">{{ $user->role->label() }}</flux:badge></flux:cell>
    <flux:cell>{{ $user->created_at->format('d/m/Y') }}</flux:cell>
    <flux:cell>
        <flux:dropdown>
            <flux:button variant="ghost" size="sm" icon="ellipsis-horizontal" inset></flux:dropdown.button>
            <flux:menu>
                <flux:menu.item wire:click="delete" variant="danger" icon="trash">Supprimer</flux:dropdown.item>
            </flux:menu>
        </flux:dropdown>

        <!-- Delete User Modal -->
        <flux:modal name="delete-user" class="min-w-[22rem] space-y-6">
            <div>
                <flux:heading size="lg" level="2">{{ __('lms.Are you sure you want to delete this user?') }}</flux:heading>
                <flux:subheading>
                    {{ __('lms.Once your user is deleted, all of its resources and data will be permanently deleted.') }}
                </flux:subheading>
            </div>
            <div class="flex gap-2">
                <flux:spacer />

                <flux:modal.close>
                    <flux:button variant="ghost">{{ __('Cancel') }}</flux:button>
                </flux:modal.close>

                <flux:button variant="danger" wire:click="$parent.deleteUser({{ $user->id }})">{{ ucfirst(__('lms.Delete user')) }}</flux:button>
            </div>
        </flux:modal>
    </flux:cell>
</flux:row>

I tried to do exactly like Caleb did in its tutorial but for him the delete keeps the previous data, but not for me

I have different usecases of using foreach of child livewire component and sometimes the data is kept, sometimes not. I don't understand why.

Here is Caleb screenshot of its delete function on the parent livewire component

Thank you for any insights :)

[jeffchown]

@joffreypersia Have you tried converting your $users to a computed property?

If you remove the public $users property, then add the method:

#[Computed]
public function users()
{
    return User::all();
}

then, edit your blade view and change any $users to $this->users, it will use the computed property and return the results of the query each time the blade view is rendered.

PS I think you have a typo in your blade view, the 2nd <flux:cell> looks like it doesn't have an opening <a>:

<flux:cell variant="strong" wire:click="edit" class="cursor-pointer">{{ $user->name }}</a></flux:cell>

[hugoaf]

Some suggestions:
1- It's always better to make the add and delete in the parent component.
2- Make a computed $users method or do the Users::all() in the render, otherwise your parent component will never know that the collection has changed.
3. if your UserRow.php child components only goal is to delete user, you actually do not need to have a child livewire component, just have a regular blade with an action wire:click="deleteUser({{$user->id}})" and a method to receive the id, find the model and delete it.

[joffreypersia]

Thank you @hugoaf and @jeffchown, indeed making $Users a computed property allowed me to now remove the $this->users = User::all(); in the function ! But because it is now a computed property, I guess it will fetch the users again under the wood, as a reactive property..?

@hugoaf, thank you for your recommandations, I use a child livewire component because I have many actions inside (switch to the user, edit him...etc). I just remove the unnecessary stuff for better lisibility !

@jeffchown nice catch on the tag :) Thank you again