Cannot get emit working correctly

Hi.

I’m trying to update a variable when i save a form. There is the main component and 2 other components inside that.

The main component is mainly responsible for the main view and showing some variables i.e. a customers credit_balance.
There is a form that updates in a scanning component which fires an event “$this->emitUp()” to the main component and from there i want it to update the customers credit balance.

When the event gets emitted, nothing happens!!! Ive tried emitUp(), emit(), EmitTo() and all do nothing.

When i look in the Inspector i can see the event there::

emits: [{event: "getCreditBalance", params: [], ancestorsOnly: true}]
0: {event: "getCreditBalance", params: [], ancestorsOnly: true}

But it never updates the customers balance on the screen.

What I have currently ::

// Main component

    public $user;
    public $credit_balance;

    protected $listeners = ['getCreditBalance'];

    public function getCreditBalance()
    {
        $this->user = User::where('id', $this->user->id)->firstOrFail();
        $this->credit_balance = $this->user->creditBalance->current;
    }


    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\\Illuminate\Http\Response
     */
    public function getCreditBalance()
    {
        $this->user = User::where('id', $this->user->id)->firstOrFail();
        $this->credit_balance = $this->user->creditBalance->current;
    }
// Form component
public function dispatchScans()
    {
        $this->validate();
        $this->emitUp('getCreditBalance');
        $this->dispatchBrowserEvent('alert', __('alerts.scans_charged', ['number' => $this->total_scans]));
        $this->reset_form();
    }

Any help would be grateful.

Many thanks

dd inside getCreditBalance() after emit dump something?

Hi @prospero. Yep tried dd’ing but nothing. It shows there’s an event emitted but the main component just isn’t catching it.

In this method

public function dispatchScans()
    {
        $this->validate();
        $this->emitUp('getCreditBalance');
        //$this->dispatchBrowserEvent('alert', __('alerts.scans_charged', ['number' => $this->total_scans]));
        $this->reset_form();
    }

can you comment the dispatch line and test dd in main component again?

I’ll have to give that a shot in the morning and report back. I’m sure I tried it, but I’d better check again.

Cheers

Gave that a shot but still nothing!

Heres the network response::

{"effects":{"html":null,"emits":[{"event":"getCreditBalance","params":[],"ancestorsOnly":true}],"dirty":["total_scans"]},"serverMemo":{"data":{"total_scans":""},"checksum":"ad5e7a3db8ae46cf33a33517af003f175bace27b7251bcffe96849f952d9c043"}}

Heres the folder/component layout, and the views are kept in pretty much the same folder structure when created through artisan.

// Main Component
-/ app/Http/Livewire/MailControl/Dispatch/DispatchIndex.php

// Scan Dispatch Componment
-/ app/Http/Livewire/MailControl/Dispatch/ScanDispatch.php

What i tried this morning also was to create a component specifically for the customer credit area.

That does emit the event to the component but then the tabs completely disappear!

Figured it out!!!

I spent too long on this one and a fresh mind this morning found a solution…

I was to do with not having a single root div element.

I removed the divs in the title and dispatch components which are embedded in the main component and that worked.

Big thanks to @prospero for your suggestions, much appreciated.

1 Like

That one will get ya every time. It’s now the first thing I check when things aren’t behaving properly.

2 Likes