php Question posted in
Official manual can be found here.

Handle livewire events in both PHP and JS

I have this component called beat-player, on the PHP code I receive a dispatched event from another component and it works:

<?php

namespace AppLivewire;

use LivewireComponent;
use LivewireAttributesOn;

class BeatPlayer extends Component
{
    public $scores;
    public $difficulty;
    public $note_type;

    public $sample_urls ;

    // public function mount($score)
    // {
    //     $this->score = $score;
    // }
    public function mount()
    {
        $this->sample_urls = [
            'snare' => asset('samples/snare.wav'),
            'kick' => asset('samples/kick2.wav'),
            'hat' => asset('samples/hihat2.wav')
        ];
    }
    
    #[On('score-updated')]
    public function handleUpates($updates){
        $this->scores = $updates['scores'];
        $this->difficulty = $updates['difficulty'];
        $this->note_type = $updates['note-type'];
    }
    public function updateScore($scores)
    {
        $this->scores = $scores;
    }
    public function updateDifficulty($difficulty){
        $this->difficulty=$difficulty;
    }
    public function updateNoteType($note_type)
    {
        $this->note_type = $note_type;
    }
    public function render()
    {
        // dd($this);
        return view('livewire.beat-player');
    }
}

on the blade code I am trying to handle it as well so I can trigger some updates on a 3rd party library:

    @script
        <script>
              ......
               snip
              ......
            window.sequencer = a();
            
            $wire.on('score-updated',(updates)=>{
                console.log('updates')
            });
        </script>
    @endscript

this event is not being triggered.
is it possible to handle in both parts?
in essence there is a property that gets updated ($scores) that I need to know when that happens.

thanks in advance

Tags:

2

Answers


  1. 0

    I think, if I understood your description correctly, the issue is that the score-updated event is dispatched from another component.

    Looking at the docs on this
    https://livewire.laravel.com/docs/events#listening-for-events-inside-component-scripts

    it says:

    You can easily listen for the post-created event inside your component’s template from a @script directive like so:

    @script
<script>
    $wire.on('post-created', () => {
        //
    });
</script>
@endscript

    The above snippet would listen for the post-created from the component it’s registered within. If the component is no longer on the page, the event listener will no longer be triggered.

    One way you can test this would be to dispatch a new event from your handleUpates function:

        #[On('score-updated')]
    public function handleUpates($updates){
        $this->scores = $updates['scores'];
        $this->difficulty = $updates['difficulty'];
        $this->note_type = $updates['note-type'];
        $this->dispatch("pass-through-score-updated");
    }

    Then listen for pass-through-score-updated in your script.

    If that works then you could leave it at that or look into dispatching events to other components:
    https://livewire.laravel.com/docs/events#dispatching-directly-to-another-component

    Hopefully that helps

    Login or Signup to reply.
  2. 0

    This generic JS listener can work:

    @script
<script>

    document.addEventListener('score-updated', (event) => {

        console.log('updates', event.detail);

    })

</script>
@endscript
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search