免责声明:我知道已经有一些关于如何将Livewire和flatpickr耦合的问题,但是我不理解提供的解决方案,因为它们与我处理问题的方式非常不同。话虽如此,我还在学习Livewire,所以可能只是做错了。
我有一个Livewire组件,在其中我使用flatpickr来选择日期和时间。
<div class="mb-3" > <input id="chosendatetime" type="datetime-local" name="chosendatetime" value="{{ old('chosendatetime') }}" wire:model.debounce.500ms="chosendatetime" /> </div>
在blade组件中,我还有一个用于初始化flatpickr的脚本部分:
<script> flatpickr("#chosendatetime", { enableTime: true, dateFormat: "d-m-Y H:i", }); </script>
日期选择器被正确渲染,但是当我更改其值时,客户端发送的数据为空。
我应该怎么做?
P粉1314557222024-04-01 16:06:46
你的代码运行正常,如果你正确设置了Livewire。
public $chosendatetime;
dd()
打印$this->chosendatetime,以查看是否接收到值@livewireStyles
和@livewireScripts
Livewire类的代码如下:
<?php namespace App\Http\Livewire; use Livewire\Component; class FlatPickr extends Component { public $chosendatetime; public function updatedChosenDatetime() { dd($this->chosendatetime); } public function render() { return view('livewire.flat-pickr'); } }
P粉2758839732024-04-01 12:22:23
尝试将wire:ignore
添加到div元素中,如下所示:
<div class="mb-3" wire:ignore> <input id="chosendatetime" type="datetime-local" name="chosendatetime" value="{{ old('chosendatetime') }}" wire:model.debounce.500ms="chosendatetime" /> </div>
这个指令告诉Livewire应该跳过页面的这部分内容,在组件刷新时不对其进行更改。如果不使用它,Livewire可能会替换flatpickr实例并使其停止工作。