Como destruir o componente livewire com um clique?

Question

Eu criei um componente livewire com alguns campos de entrada, adicionei um loop for ao componente pai com o componente filho dentro.

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

Cada componente filho possui um botão de exclusão. Como pode ser o método para este botão?

Answer 1

Duas maneiras vêm à mente. Uma delas é que você exibe uma visualização vazia se o item for excluído ou dispara um evento para atualizar todos os componentes que são renderizados dentro desse loop.

1: Atualizando o pai

Isso pressupõe que o componente pai seja um componente Livewire.

Em seu pai, você pode ouvir um evento para se atualizar. Simplesmente declare um ouvinte em seu componente pai (o componente que contém seu @forloop), adicionando o seguinte.

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

refreshParentComponenté o nome do evento, você pode renomeá-lo para algo mais adequado (esse nome provavelmente não é um bom nome), e $refreshé a ação - e no Livewire, a $refreshação é uma ação mágica que simplesmente atualiza o componente em sua totalidade , basicamente renderizando-o novamente. Isso significa que você obterá um novo conjunto de dados após excluir o item e renderizará tudo com esses dados.

Para fazer o evento disparar, em sua Profile\GarageServiceListItemclasse, onde você exclui o item, você pode disparar, ou emitir , aquele evento específico - e você pode emiti-lo para cima. Você pode fazer isso chamando o emitUpmétodo.

$this->emitUp('refreshParentComponent');

2: Renderizando um bloco HTML vazio

Você pode adicionar uma propriedade booleana ao seu componente Livewire, por exemplo public $show = true;. Então, na base da sua garage-service-list-itemvisualização, você começa verificando essa propriedade.

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

Então, no método em que você exclui o componente, basta definir $this->show = false;e pronto! O componente irá renderizar um <div>bloco vazio .

---

• Eventos Livewire
• Propriedades Livewire