I am using livewire in laravel and have come across strange issue.
I have a bootstrap modal in child component. When the child component has to re-render when something is typed in modal the modal breaks and I am left with black screen. Actually the issue is in ongoing project but can be boild down to what is seen below.
Parent component class file.
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class ParentComponent extends Component
{
public function render()
{
return view('livewire.parent-component');
}
}
Parent component blade file
<div>
<!-- parent-component.blade.php -->
@livewire('child-component')
<!-- Other code -->
</div>
Child component class file
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class ChildComponent extends Component
{
public $name = "";
public function render()
{
return view('livewire.child-component');
}
}
Child component blade file
<div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal" id="exampleModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<!--
| Issue here
|
| When user types here and component has to render again the modal breaks.
|
-->
<input type="text" wire:model="name" />
<p></p>
</div>
</div>
</div>
</div>
</div>
I have seen few solutions in the internet but nothing seems to solve this specific issue.
Aucun commentaire:
Enregistrer un commentaire