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>
在我的環境中按預期工作。 乾杯