Laravel Livewire: how to force refresh of a computed property (and the DOM)?

Question

I have a "favorite" component. This component draws a star which gets three classes acording to the state. To select which class to apply to the component, I use a computed property, defined as:

  public function getEsFavoritaProperty() {
    return $this->idea->users()->where('user_id', Auth::user()->id)->count() > 0;
  }

  public function getFavoritaProperty() {

    if (Auth::guest()) return 'voto-idea-inactivo';

    if ($this->EsFavorita) {
      return 'voto-idea-seleccionado';
    } else {
      return 'voto-idea-activo';
    }
  }

It's Spanish, but I think logic is clear: if there's no signed user (guest) then function will return voto-idea-inactivo class, if the user is logged on, it will return one or another based in the function that asks if the current item is favorited by the current user.

These two functions works as expected. If I change data in the pivot table directly in the database, the star shows the state correctly.

Now I have this anchor <a> in the star...

<a wire:click.prevent="toggleFavorita">
    <i class="fas fa-star fa-2x {{ $this->favorita }}"></i>
</a>

so it toggles (attach/detach) the relationship, function is:

  public function toggleFavorita() {
    if ($this->EsFavorita) {
      $this->idea->users()->detach(Auth::user()->id);
    } else {
      $this->idea->users()->attach(Auth::user()->id);
    }
  }

This one also works perfectly, if user clicks on the star, the function creates or deletes the relation in the database as it should. The problem is the star doesn't repaint, and keeps the previous state. If I reload the page, the changes appear.

So how do I force this star to refresh with the new computed value?

Thanks. How should I call the function?. I placed $this->render() just after updating the databse (in the toggleFavorita() function), but it doesn't work — luisfer
– luisfer, Commented Oct 8, 2020 at 4:02
Uhmmm it's strange, I have to click twice, and of course it shows the PREVIOUS state. I mean, its "off", I click... stays off. I check in the database and there's the relation, I click again, it goes "on" but the database doesn't have the relation anymore???? — luisfer
– luisfer, Commented Oct 8, 2020 at 4:06
That gave me an error: "Public method [toggleFavorita;$refresh] not found on component: [show-idea]" — luisfer
– luisfer, Commented Oct 8, 2020 at 4:07
Nah... I tried it also doens't work. I placed the $refresh on a standalone button, and it works, but its a bit dumb to click on the star and then in the other button. I called toggleFavorita(); $refresh on the button, but it doesn't work either — luisfer
– luisfer, Commented Oct 8, 2020 at 4:16

cby016 · Accepted Answer · 2022-09-15 18:42:28Z

4

In case someone does need to force a refresh of a computed property in Livewire, you can do it using the forgetComputed method.

// forget all computed properties
$this->forgetComputed();

You can also pass one or more property keys to this method to reset specific properties.

Source: https://github.com/livewire/livewire/blob/master/src/Component.php

answered Sep 15, 2022 at 18:42

cby016

1,3282 gold badges13 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jonathan Ma Over a year ago

amazing, super helpful and works for me. you can forget a specific property by doing $this->forgetComputed('jobs')

Szymon Cybulski Over a year ago

Livewire v3 advises to use the PHP's unset() method instead. livewire.laravel.com/docs/computed-properties#busting-the-cache

luisfer · Accepted Answer · 2020-10-08 16:15:53Z

I solved the problem... had nothing to do with refreshing the component 🤷🏻‍♂️

Thing is... in the toggleFavorita computed property, I was trying to access another property, in this case EsFavorita defined by getEsFavoritaAttribute()

What I did is to change that function from being a computed property, to a normal function, and then calling that function as so... so modified coded looks now like:

public function EsFavorita() {
    return $this->idea->users()->where('user_id', Auth::user()->id)->count() > 0;
}

public function toggleFavorita() {
    if ($this->EsFavorita()) {
        $this->idea->users()->detach(Auth::user()->id);
    } else {
        $this->idea->users()->attach(Auth::user()->id);
    }
}

I don't know, looks like a life cycle, that the computed properties refreshes AFTER everything else. I took me a lot of time and lot of Log::info()'s to figure it out

Collectives™ on Stack Overflow

Laravel Livewire: how to force refresh of a computed property (and the DOM)?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related