Home > Mobile >  Livewire emitTo and redirect
Livewire emitTo and redirect

Time:11-20

In component AAA's view I have a button that submits an Event to component AAA

Component AAA View:

<button wire:click="$emit('goToPage')">Go To Two</button>

Component AAA receives it like this:

protected $listeners = ['goToPage'];

I then want to fire another event that redirects as well as changes a tab value from one to two in component BBB.

That looks like this (Still in Component AAA*):

    public function goToPage()
    {
      $this->emit('changeTabs', $this->tab="two")->to('Alphabet.BBB');
      $this->redirectRoute('bbb', $this->bbb->id);
    }

Over on Component BBB I have the following:

    public $tab = 'one'; //THIS IS THE DEFAULT TAB

    protected $listeners = ['changeTabs'];

    public function changeTabs()
    {
        return $this->tab="two";
        //dd(Made it here);

    }

I get redirected from page AAA to page BBB, but the changeTabs function is not working. The tab stays at it's default tab of one.

It never reaches the changeTabs function return or die dump.

How can I fix this issue?

Thanks!

CodePudding user response:

Form what I understand:

$this->redirectRoute('bbb', $this->bbb->id);

makes HTTP redirection, so emiting events won't make any change as you make complete redirection and after redirection there is fresh component.

I would personally instead used:

 return redirect()->route('bbb', ['param1'=> $this->bbb->id, 'tab' => 'two']);

And then use request variable in component mount method to decide which tab should be opened.

Of course instead of exposing tab in url you can also flash this to session to be more transparent

  • Related