Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

emergingdzns's avatar

$dispatch in Laravel Livewire component doesn't do anything

I'm using livewire with laravel. I'm trying to implement the Pikaday date picker. The picker seems to work fine. It allows me to select the date. The onSelect action fires (which is where I have $dispatch('input', date)). But watching my network console, the component never gets called. I also added the x-on:change to the root object to do the same. Here's the component blade:

<div
    x-data=""
    x-on:change="$dispatch('input', moment($event.target.value).format('{{ $format }}'));"
    x-init="new Pikaday({ field: $refs.input, onSelect: function (date) { $dispatch('input', date)); }});"
    class="relative form-floating mb-3 xl:w-48">
    <input
        x-ref="input"
        type="text"
        {{ $attributes }}
    />
    <label wire:ignore for="{{ $attributes['label'] }}" class="text-gray-700">{{ $attributes['label'] }}</label>
</div>

Here's the part of the main blade that loads the component blade:

<x-set-date wire:model="start_date" name="start_date" id="start_date" autocomplete="off" placeholder="Start Date"
     label="Start Date" format="MM/DD/YYYY" />

Lastly, here's my Livewire component class for "set-date":

class SetDate extends Component
{
    public $start_date;
    public $end_date;

    public $rules = [
        'start_date' => 'date',
        'end_date' => 'date'
    ];

    public function mount() {
        $this->start_date = session('start_date', date('Y-m-d', strtotime('-7 days')));
        $this->end_date = session('end_date', date('Y-m-d'));
    }

    public function render()
    {
        return view('livewire.set-date');
    }

    public function setStartDate() {
        $this->validate();
        $start_date = Carbon::parse($this->start_date)->format('Y-m-d');
        session(['start_date' => $start_date]);
    }

    public function setEndDate() {
        $this->validate();
        $end_date = Carbon::parse($this->end_date)->format('Y-m-d');
        session(['end_date' => $end_date]);
    }
}

When I click into the date picker, it comes out (using tailwind css and Pikaday date picker with all js/css loaded along with livewire scripts etc).

I added console.log(date) to the onSelect and to the x-on:change lines to ensure that I'm getting the correct data. But watching Chrome's network tab, there's no call made back to set-date component.

Can anyone help?

0 likes
3 replies
EZeller1's avatar

You are creating an Alpine.js component, so you have to use the this context (or its parent alias you created) to access the magic properties, like $dispatch:

this.$dispatch('input', contents)

https://www.myhealthatvanderbilt.net/

2 likes
emergingdzns's avatar

Thanks all. I am new to Alpine and actually didn't realize I was creating alpine components. I thought that as part of livewire. I decided to rollback and just create the "render" view and then used @livewire to load a livewire blade and suddenly things started working. Sad that I wasted a day on this but at least I learned something new!

1 like

Please or to participate in this conversation.