Heim > Fragen und Antworten > Hauptteil
Haftungsausschluss: Ich weiß, dass es einige Fragen zur Kopplung von Livewire und Flatpickr gab, aber ich verstehe die bereitgestellten Lösungen nicht, da sie sich stark von meiner Herangehensweise an das Problem unterscheiden. Allerdings lerne ich immer noch Livewire, also mache ich es vielleicht einfach falsch.
Ich habe eine Livewire-Komponente, in der ich flatpickr verwende, um Datum und Uhrzeit auszuwählen.
<div class="mb-3" > <input id="chosendatetime" type="datetime-local" name="chosendatetime" value="{{ old('chosendatetime') }}" wire:model.debounce.500ms="chosendatetime" /> </div>
In der Blade-Komponente habe ich auch einen Skriptabschnitt zum Initialisieren von flatpickr:
<script> flatpickr("#chosendatetime", { enableTime: true, dateFormat: "d-m-Y H:i", }); </script>
Die Datumsauswahl wird korrekt gerendert, aber wenn ich ihren Wert ändere, sind die vom Client gesendeten Daten leer.
Was soll ich tun?
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实例并使其停止工作。