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