« Réinitialisation du sélecteur de date lors de la mise à jour Livewire »
P粉696146205
2023-08-25 21:12:55
<p>J'ai un composant Livewire très simple qui contient un champ de texte et un sélecteur de date : </p>
<pre class="brush:html;toolbar:false;"><!-- test.blade.php -->
<div>
<type d'entrée="texte" wire:model="test" placeholder="test">
<input datepicker="" wire:model="start" datepicker-format="jj.mm.aaaa" type="texte" placeholder="Date...">
</div>
≪/pré>
<pre class="brush:php;toolbar:false;">/* Test.php */
classe Test étend le composant
{
public $test ;
public $début ;
fonction publique mount()
{
$this->start = now()->format('d.m.Y');
}
fonction publique render()
{
return view('livewire.test');
}
}
≪/pré>
<p>Le sélecteur de date que j'utilise est Flowbite Datepicker. </p>
<p>Lorsque je change la date, puis que je modifie le champ de saisie du test, le sélecteur de date se réinitialise à la date du jour. </p>
<p>Que dois-je faire pour conserver la valeur de départ ? </p>
<p><strong>Qu’ai-je déjà essayé ? </strong>
J'ai essayé d'utiliser wire:ignore sur le sélecteur de date mais cela n'a pas aidé. </p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
J'ai fait quelques débogages ici et j'ai découvert que dans le code du sélecteur de date, nous pouvons utiliser l'événement "changeDate" pour le connecter à Livewire. Je ne sais pas pourquoi cela n'a pas été documenté. Voici le code :
Vue des composants :
<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>Composants :
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'); } }Et le code HTML qui contient le composant Livewire et le code js qui écoute l'événement du sélecteur de date Flowbite et déclenche l'événement Livewire après cela.
<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>Fonctionne comme prévu dans mon environnement. Bravo