Blog

Fala pessoal , tudo certo?

Bora falar mais um pouco do livewire? Para chamar uma modal dinamicamente utilizando o Livewire e Laravel, vamos seguir os seguintes passos:

Defina um componente Livewire para a modal:

Crie um novo componente Livewire que será responsável pela exibição da modal e quaisquer ações associadas a ela. Por exemplo, vamos chamá-lo de ModalExample.

php artisan make:livewire ModalExample

Crie uma view para a modal:

Dentro da pasta resources/views/livewire, crie um arquivo chamado modal-example.blade.php. Este arquivo conterá o conteúdo da modal que você deseja exibir.

<!-- resources/views/livewire/modal-example.blade.php -->
<div>
    <h3>Exemplo de Modal</h3>
    <!-- Conteúdo da modal aqui -->
</div>

Adicione a chamada da modal no componente pai:

Agora, você precisa adicionar o código ao componente pai onde deseja chamar a modal dinamicamente. Vamos supor que você queira exibir a modal ao clicar em um botão.

<!-- resources/views/livewire/parent-component.blade.php -->
<div>
    <!-- Seu conteúdo do componente pai aqui -->
    <button wire:click="showModal">Abrir Modal</button>
    @if($showModal)
        @livewire('modal-example')
    @endif
</div>

Atualize o componente Livewire:

Agora, volte para o arquivo do componente Livewire ModalExample.php e adicione o código necessário para controlar a exibição da modal.

// app/Http/Livewire/ModalExample.php
namespace App\Http\Livewire;
use Livewire\Component;
class ModalExample extends Component
{
    public $showModal = false;
    public function showModal()
    {
        $this->showModal = true;
    }
    public function closeModal()
    {
        $this->showModal = false;
    }
    public function render()
    {
        return view('livewire.modal-example');
    }
}

Agora, quando você clicar no botão “Abrir Modal” no componente pai, a modal será exibida dinamicamente. Você também pode adicionar botões ou links dentro da modal para executar ações específicas.