Hide and show components on condition or click event

#1

What seems to be the problem:
I am developing a package in Laravel and seeking the best practice to hide and show Livewire components without refreshing the page.
for ex:- we initially load the login component and on click of forget password button/link switch the component with forget password component

Steps to Reproduce:

Are you using the latest version of Livewire:
yes I am using livewire 2
Do you have any screenshots or code examples:
No

#2

Hey, @rifRocket

You can make a public boolean property called for example $show and make the child component show/hide base on it:

component:

...
public $show = false;
...

base.blade.php

<button wire:click="$set('show', true)">Show component 1</button
<button wire:click="$set('show', false)">Show component 2</button>

@if($show)
 <livewire:component-one/>
@else
<livewire:component:two/>
@endif
2 Likes
#3

For this method, the round trip back to the server seems to be pretty slow ( 1+ second to re-render simple component ), is there any way to speed up the process?