Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – How to update a variable of the Livewire component class when window focus event happens?

MyLivewireComponent.php

<?php
namespace AppLivewire;

use LivewireComponent;
use AppModelsPerson;

class MyLivewireComponent extends Component {
    public $persons;

    public function mount() {
        $this->persons = Person::all();
    }

    public function render() {
        return view('livewire.my-livewire-component');
    }
}
?>

When the browser’s window got focused (focus event), I just want to update the contents and value of the $persons variable by re-executing the statement:

$this->persons = Person::all();

So that it would get the new comprehensive list if ever there were additions to that collection.

This is because on my Blade…

my-livewire-component.blade.php

<select>
    @foreach($persons as $person)
    <option value="{{ $person->id }}">{{ $person->name }}</option>
    @endforeach
</select>

This would ensure that the dropdown list is always updated once the user is back to the web application.

Which brings me back to my question. How to update a variable of the Livewire component class when window focus event happens?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was able to do this by...

    MyLivewireComponent.php

    <?php
namespace AppLivewire;

use LivewireComponent;
use AppModelsPerson;

class MyLivewireComponent extends Component {
    public $persons;

    public function mount() {
        $this->persons = Person::all();
    }

    public function render() {
        return view('livewire.my-livewire-component');
    }

    // Step 2 - Handle the event on the server-side
    #[On('updatePersons')]
    public function updatePersons() {
        $this->persons = Person::all();

        // Step 3 - Tell the client-side that there is an update
        $this->dispatch('personsUpdated');
    }

}
?>

    my-livewire-component.blade.php

    <div>

    <!-- Step 4 - Livewire will repaint it when it gets any update even though it wasn't specified which data were updated. Remember, that's how Livewire works -->
    <select>
        @foreach($persons as $person)
            <option value="{{ $person->id }}">{{ $person->name }}</option>
        @endforeach
    </select>

    <!-- Step 1 - Listen to the focus event on the client-side -->
    <script>
        window.addEventListener('focus', function (event) {
            Livewire.dispatch('updatePersons');
        });
    </script>

</div>

    Versions

    Laravel Livewire
    v10.35.0 v3.2.6

  2. 0

    If you are using AlpineJS you could use the x-on method. Using this handle you can fire events to execute Livewire methods that updates the Person list.

    Example:

     <div x-on:blur="$dispatch('windowRefocused')">

    Livewire events

    AlpineJS x-on directive

    AlpineJS $dispatch magic

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search