如何在点击时销毁 livewire 组件？

Question

我创建了一个带有一些输入字段的 livewire 组件，向父组件添加了一个 for 循环，其中包含子组件。

@for($i = 0; $i < $count; $i++)
    @livewire('dashboard.profile.garage-service-list-item', ['garage' => $garage], key($i))
@endfor

每个子组件都有一个删除按钮。这个按钮的方法怎么样？

Answer 1

两种方式 spring 记住。一个是如果项目被删除，你会显示一个空视图，或者你触发一个事件来刷新在该循环中呈现的所有组件。

1：刷新父级

This assumes that the parent component is a Livewire component.

在你的父级中，你可以监听一个事件来刷新自己。通过添加以下内容，只需在父组件（具有 @for 循环的组件）中声明一个侦听器。

protected $listeners = ['refreshParentComponent' => '$refresh'];

refreshParentComponent 是事件的名称，您可以将其重命名为更合适的名称（该名称可能不是一个好名称），$refresh 是动作 - 在 Livewire 中，$refresh 动作是一个神奇的动作，它只是简单地整体刷新组件，基本上是 re-rendering 它。这意味着您将在删除项目后获得一组新数据，并使用该数据渲染所有数据。

要触发事件，在您删除项目的 Profile\GarageServiceListItem class 中，您可以触发或发出特定事件- 你可以向上发射它。您可以通过调用 emitUp 方法来做到这一点。

$this->emitUp('refreshParentComponent');

2：渲染空 HTML 块

您可以将布尔值属性添加到您的 Livewire-component，例如 public $show = true;。然后在 garage-service-list-item 视图的基础上，首先检查属性.

<div>
    @if ($show) 
        <!-- The rest of your component here -->
    @endif
</div>

然后在删除组件的方法中，设置$this->show = false;即可！该组件将呈现一个空的 <div> 块。

如何在点击时销毁 livewire 组件？

How to destroy livewire component on click?

laravel

laravel-livewire

1：刷新父级

2：渲染空 HTML 块