Can we load Livewire Component on clicking some button?

Question

I have a Livewire component with a button, and I want to append a form (i.e another livewire component) by clicking that button. Like we do that by using ajax, requesting to the backend to load HTML and append with jQuery. So question is, can we do the same with Livewire?

<div>
    <button wire:click="loadFormComponent">Add a Link</button>
    <div>
        here I want to append the result of `loadFormComponent`
    </div>
</div>

bellow is Form Component

<div>
    <form wire:submit.prevent="addLink">
        <div>
            <input type="URL" wire:model="URL" placeholder="https://example.com">
            <button type="submit">Save Link</button>
        </div>
    </form>
</div>

Answer 1

Yes, you can display parts of your blade -including other Livewire components- under conditions. You don't need AJAX for this. You make the section of your Blade file conditional:

<div>
    <button wire:click="$set('showFormComponent', true)">Add a Link</button>
    @if ($showFormComponent)
    <div>
        here I want to append the result of `loadFormComponent`
    </div>
    @endif
</div>

and in your livewire component you need to add:

public $showFormComponent;

On click, the variable $showFormComponent will be set to true and view will be re-rendered including the component.