#It doesn't reactive.

12 messages · Page 1 of 1 (latest)

valid jungle
#

I have the list of users, that each of them is has a followers count.

This is list component of the users.

class Index extends Component
{
    public Collection $users;

    public function render(): View
    {
        return view('livewire.users.index', [
            'users' => $this->users,
        ]);
    }
}

Then this is the item of each the list.

class Item extends Component
{
    public User $user;

    public function render(): View
    {
        return view('livewire.users.item', [
            'users' => $this->user,
        ]);
    }
}

And then this is the followers component that should be reactive, but it doesnt.

class Follower extends Component
{
    #[Reactive]
    public int $count;

    public function render(): string
    {
        return <<<'BLADE'
        <div class="p-2 flex items-center flex-col">
            <strong class="font-bold">{{ $count }}</strong>
            <div>
                followers
            </div>
        </div>
        BLADE;
    }
}

The follow button is just simple.

class FollowButton extends Component
{
    public User $user;

    public function follow(): void
    {
        Auth::user()->toggleFollow($this->user);
    }

    public function render(): string
    {
        return <<<'BLADE'
        <div>
            <x-primary-button wire:click="follow">
                {{ Auth::user()->isFollowing($user) ? 'Unfollow' : 'Follow' }}
            </x-primary-button>
        </div>
        BLADE;
    }
}
#

For the blade file, this is what I have.

<div class="grid grid-cols-3 gap-4">
    @foreach($users as $user)
        <livewire:users.item :key="$user->id" :$user/>
    @endforeach
</div>

This is the item.

<x-card>
    <x-slot name="title">
        {{ $user->name }}
    </x-slot>
    <x-slot:description>
        <div class="grid grid-cols-3 divide-x">
            <div class="p-2 flex items-center flex-col">
                <strong class="font-bold">{{ $user->tweets_count }}</strong>
                <div>tweets</div>
            </div>
            <livewire:users.follower :count="$user->followers_count"/>
            <livewire:users.following :count="$user->followings_count"/>
        </div>
    </x-slot:description>
    <x-slot:footer>
        <livewire:users.follow-button :user="$user"/>
    </x-slot:footer>
</x-card>

Note, I'm here new to livewire, I've just rewrite my code as docs do.

#

Please tell me if I have todo, or am I missing something. I just want the followers component to be reactive, that's it.

hazy valley
#

Maybe because you update the user also in a nested component which looks not reactive to me

#

But not sure if there is some magic to handle this, hadn't time to play with the reactive feature yet

valid jungle
#

In my case, the users is come from controllers, is not on the livewire component. But, I've fetched them inside the list component. Which is.

class Index extends Component
{
    public Collection $users;

    public function render(): View
    {
        return view('livewire.users.index', [
            'users' => $this->users,
        ]);
    }
}

I'll assume this will not being reactive, and yes. The docs is true. So I try to make a followers to be reactive. But it does not reactive. I'm afraid that I missing something.

hazy valley
#

Yes, but where do you tell the parent component that your user model has changed when pressing the follow button?

#

Follow button component is completely isolated

valid jungle
#

Is that required, the docs said, we just add #[Reactive]

#

Or even the caleb on laracon us just add that thing.

hazy valley
#

Reactive is supposed to update child components, the counter is not a child component of your follow button

#

Caleb hat a parent component that updated a child component. You have a parent component with 2 child components where the update happens in one of the child components and is not reflected back to the parent component.