P粉8074716042023-08-26 14:38:51
我在这里做了一些调试，发现在日期选择器的代码中，我们可以使用“changeDate”事件来将其与Livewire连接起来。不知道为什么这一点没有被记录下来。 以下是代码：
组件视图：
<div>
<input type="text" wire:model="test" placeholder="测试">
<input name="start" id="startInput" inline-datepicker="" wire:model="start" datepicker-format="dd.mm.yyyy" type="text" placeholder="{{$start}}" value="{{$start}}" datepicker-autohide>
<br>
<br>
当前属性：
<hr>
<div>
{{$test}} <br>
{{$start}}
</div>
</div>
组件：
namespace App\Http\Livewire;
use Livewire\Component;
class SomeComponent extends Component
{
public $test;
public $start;
protected $listeners = ['changeDate' => 'changeDate'];
public function changeDate($date)
{
$this->start = $date;
}
public function mount()
{
$this->start = now()->format('d.m.Y');
}
public function render()
{
return view('livewire.some-component');
}
}
以及包含Livewire组件的HTML代码，以及监听Flowbite日期选择器事件并在此之后触发Livewire事件的js代码。
<body>
<div>
<br>
<br>
@livewire('some-component')
</div>
<script>
document.getElementById("startInput").addEventListener("changeDate", function (e) {
Livewire.emit('changeDate', e.detail.datepicker.inputField.value)
});
</script>
@livewireScripts
</body>
在我的环境中按预期工作。 干杯