连线后无法刷新 Livewire 组件：单击按钮

Question

在单击触发

LikeCounter

事件的按钮后，我似乎无法刷新我的

wire:click

livewire 组件。

我的

LikeCounter

Livewire 组件：

class LikeCounter extends Component
{
    public $id,$photo,$like_count,$like_exist;

    protected $listeners = [
        'refreshParent' => '$refresh',
      ];
      
    public function mount($id)
    {
        $this->id = $id;
        $this->photo = Photo::find($this->id);
        $this->like_count = LikeCount::count();
        if(LikeCount::where('user_id',Auth::id())->where('photo_id',$this->id)->get()->isEmpty() == false ){
            $this->like_exist = 1;
        }
        else{
            $this->like_exist = 0;
        }
    }
    public function like()
    {
        $this->photo = Photo::find($this->id);
        $user_id = Auth::id();
        $this->photo->likes()->create([
            'user_id' => $user_id,
            'photo_id'=> $this->photo->photo_id
        ]);
        $this->dispatch('refreshParent');
    }
    public function unlike()
    {
        $this->photo = Photo::find($this->id);
        $user_id = Auth::id();
        $like = new LikeCount;
        $like->where('photo_id',$this->id)->where('user_id',$user_id)->delete();
        $this->dispatch('refreshParent');
    }
    public function render()
    {
        return view('livewire.like-counter');
    }
}

我的

like-counter.blade.php

刀片文件：

<div>
    @if($like_exist != 1)
    <button type='button' class='button btn' wire:click='like'>Like...</button>
    @else
    <button type='button' class='button btn' wire:click='unlike'>Unlike...</button>
    @endif
    <p>{{ $like_count }} people liked this photo</p>
</div>

我预计点击 Like/Unlike 按钮后，

wire:click

事件会触发我的

<button>

元素中指定的方法，然后重新加载组件以反映组件中的更改，但触发后它并没有刷新我需要完全重新加载才能获得更新的结果。

由此，我认为我的代码可能存在三个问题：

1. 我的

   like-counter.blade.php

   文件写入不正确，我需要将其合并到带有切换更改的单个按钮中（因此需要我的

   like()

   和

   unlike()

   方法进行合并）
2. 我在

   LikeCounter

   组件中的刷新方法无法正常工作

如果这些都不正确，我应该如何重构我的代码？

Answer 1

主要问题似乎是，当调用

$this->like_count

函数时，

$this->like_exists

和

mount()

仅被调用一次 opun。该函数无法刷新，只能调用一次。

解决方案1：

您可以拥有与

mount()

相同的功能，例如

boot()

，可以再次调用opun。这将解决问题。

解决方案2：

您可以在函数

$this->like_count

和

$this->like_exists

的末尾更新

like()

和

unlike()

，如下所示：

class LikeCounter extends Component
{
    public $id,$photo,$like_count,$like_exist;

    protected $listeners = [
        'refreshParent' => '$refresh',
      ];
      
    public function mount($id)
    {
        $this->id = $id;
        $this->photo = Photo::find($this->id);
        $this->like_count = LikeCount::count();
        if(LikeCount::where('user_id',Auth::id())->where('photo_id',$this->id)->get()->isEmpty() == false ){
            $this->like_exist = 1;
        }
        else{
            $this->like_exist = 0;
        }
    }
    public function like()
    {
        $this->photo = Photo::find($this->id);
        $user_id = Auth::id();
        $this->photo->likes()->create([
            'user_id' => $user_id,
            'photo_id'=> $this->photo->photo_id
        ]);
        $this->like_count = LikeCount::count();
        if(LikeCount::where('user_id',Auth::id())->where('photo_id',$this->id)->get()->isEmpty() == false ){
            $this->like_exist = 1;
        }
        else{
            $this->like_exist = 0;
        }
        $this->dispatch('refreshParent');
    }
    public function unlike()
    {
        $this->photo = Photo::find($this->id);
        $user_id = Auth::id();
        $like = new LikeCount;
        $like->where('photo_id',$this->id)->where('user_id',$user_id)->delete();
         $this->like_count = LikeCount::count();
        if(LikeCount::where('user_id',Auth::id())->where('photo_id',$this->id)->get()->isEmpty() == false ){
            $this->like_exist = 1;
        }
        else{
            $this->like_exist = 0;
        }
        $this->dispatch('refreshParent');
    }
    public function render()
    {
        return view('livewire.like-counter');
    }
}