我们可以通过单击某个按钮加载 Livewire 组件吗？

问题描述

我有一个带按钮的 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>

解决方法

是的，您可以在条件下显示刀片的部件 - 包括其他 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，并且视图将重新渲染，包括组件。