我们可以在单击某个按钮时加载 Livewire 组件吗？答案

【问题标题】：Can we load Livewire Component on clicking some button?我们可以在单击某个按钮时加载 Livewire 组件吗？
【发布时间】：2021-08-14 16:55:12
【问题描述】：

我有一个带有按钮的 Livewire 组件，我想通过单击该按钮来附加一个表单（即另一个 livewire 组件）。就像我们使用 ajax 一样，请求后端加载 HTML 并附加 jQuery。那么问题来了，我们可以对 Livewire 做同样的事情吗？

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

下面是表单组件

<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>

【问题讨论】：

标签： laravel-livewire livewires

【解决方案1】：

是的，您可以在一定条件下展示您的刀片的某些部分 - 包括其他 Livewire 组件。为此，您不需要 AJAX。您将 Blade 文件的部分设置为有条件的：

<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>

在您的 livewire 组件中，您需要添加：

public $showFormComponent;

点击时，变量$showFormComponent 将被设置为true，视图将被重新渲染，包括组件。

【讨论】：