Hi everyone,
After spending a few hours trying to solve this problem I thought I’d ask for your advice. I just began hacking with Livewire and so far I’m really impressed.
I’ve had no problems binding the value of a standard text input by I’m struggling to do the same when the input is part of a custom Laravel Blade Component.
Livewire component (Example.php):
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Example extends Component
{
public $name;
public function render()
{
return view('livewire.example');
}
}
Livewire component view (example.blade.php):
My livewire view is including a custom Blade component. I’m also displaying the $name variable
for debugging purpose.
<div>
<x:custom-input wire:model="name" />
{{ $name }}
</div>
Blade custom-input component:
My understanding is that the the wire:model statement used in the Livewire component will catch input event of child element, thus capturing any text entered in the following input. It actually does but not in the way I was expecting: every time I type inside the input, it gets somehow “reset” to an empty string.
<div {{ $attributes }}>
Custom input : <input type="text" />
</div>
Here’s the compiled view
<div wire:id="zEm3sVjn0zw6Zl8cgYEo">
<div wire:model="name">
Custom input : <input type="text">
</div>
</div>
If I type only one character, here’s the response I get back for Livewire :
{
"id": "0iLgBaxBe2tV06ghIxzr",
"name": "example",
"dom": "<div wire:id=\"0iLgBaxBe2tV06ghIxzr\">\n <div wire:model=\"name\">\n Custom input : <input type=\"text\" />\n</div>\n \n a\n</div>\n",
"fromPrefetch": false,
"redirectTo": false,
"children": [],
"dirtyInputs": [],
"data": {
"name": "a"
},
"eventQueue": [],
"dispatchQueue": [],
"events": [],
"checksum": "9d6b1ee6544d47c97b7a807c7a3896f718cc823a91a7524f4d410ae9b4e59ba6"
}
It looks like it’s returning the entered character but at this moment the input has been cleared for some reason.
Did any of you experience something similar ?
Are you using the latest version of Livewire: yes
N.B. I’d like to point the fact that I already tried using the wire:model statement directly inside the blade component and it works as intended but I’d like to avoid putting Livewire specific stuff inside a generic component I’m trying to build.
Thank you kindly for your help.