Один и тот же компонент Laravel Livewire: синхронизация двух элементов на одной странице

Я сделал follower компонент.

Если посетитель следует за автором, то компонент покажет Following, а если нет, то Follow.

Ставлю follower компонент в два места страницы.

-следующий компонент.

<div>
    <a href="javascript:void(0);" class="follow_btn" wire:click="toggle">{{$following? 'Following': 'Follow'}}</a>
</div>

public $ following = true; общедоступный $ post;

public function mount($post)
{
    $this->post = $post;
}
public function render()
{
    if(Auth::check()&&user()->isFollowing($this->post->user))
    {
        $this->following = true;
    }else {
        $this->following = false;
    }
    return view('livewire.following');
}
public function toggle()
{
    user()->toggleFollow($this->post->user);
}

Я использую этот компонент в двух местах на одной странице.

<livewire:follower :post="$post">
...
<livewire:follower :post="$post">

Когда я щелкаю один компонент, он переключается и работает хорошо.

Но другой компонент сохраняет старое состояние.

Как их синхронизировать?

Спасибо


person lovecoding    schedule 24.07.2020    source источник
comment
Вы пробовали передать разные ключи обоим компонентам? например: key = first - {{$ post- ›id}} и: key = second - {{$ post-› id}}   -  person itepifanio    schedule 24.07.2020
comment
Чтобы их синхронизировать ??   -  person lovecoding    schedule 24.07.2020
comment
@lovecoding Не могли бы вы их синхронизировать? У меня такой же недостаток.   -  person user2851148    schedule 20.02.2021
comment
@ user2851148 Пожалуйста, проверьте этот ответ. stackoverflow.com/a/66292844/13431339   -  person lovecoding    schedule 20.02.2021


Ответы (1)


Мне пришлось отправить событие обновления.

protected $listeners = [
     'followingRefresh' => '$refresh',
];

public function mount($post)
{
    $this->post = $post;
}
public function render()
{
    if(Auth::check()&&user()->isFollowing($this->post->user))
    {
        $this->following = true;
    }else {
        $this->following = false;
    }
    return view('livewire.following');
}
public function toggle()
{
    user()->toggleFollow($this->post->user);
    $this->emit('followingRefresh'); //emit event
}
    

Надеюсь, это кому-то поможет.

person lovecoding    schedule 20.02.2021