laravel-livewire - 我们可以在单击某个按钮时加载 Livewire 组件吗？

Question

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

Answer 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并且视图将被重新渲染，包括组件。