change view dynamically in a page
Hello,
I've made a page in which I'd like to have tabs.
When I click on a tab, I want to load a different component in my page.
Is it possible to load different component on live like @livewire('components.'.$componentName) ?
Solution:Jump to solution
I found the solution with add key parameter in component :
@livewire('components.'.$componentName, [], key($key))
and in changeTab function, add :
$this->key = random_int(-999, 999);...
2 Replies
I try this :
<ul role="presentation">
<li role="presentation">
<button id="tab1-tab" wire:click="changeTab('tab1')" type="button" role="tab" aria-controls="tab1" aria-selected="false">
Tab1
</button>
</li>
<li role="presentation">
<button id="tab2-tab" wire:click="changeTab('tab2')" type="button" role="tab" aria-controls="tab2" aria-selected="false">
Tab2
</button>
</li>
{{ dump($componentName) }}
<div id="{{$componentName}}" role="tabpanel" aria-labelledby="{{$componentName}}-tab">
@livewire('components.'.$componentName)
</div>
And in my Page :
public function changeTab(string $name)
{
$this->componentName = $name;
}
The dump is correct, but the view doesn't changeSolution
I found the solution with add key parameter in component :
@livewire('components.'.$componentName, [], key($key))
and in changeTab function, add :
$this->key = random_int(-999, 999);