"Pemilih tarikh ditetapkan semula pada kemas kini Livewire"
P粉696146205
2023-08-25 21:12:55
<p>Saya mempunyai komponen Livewire yang sangat ringkas yang mengandungi medan teks dan pemilih tarikh: </p>
<pre class="brush:html;toolbar:false;"><!-- test.blade.php -->
<div>
<jenis input="teks" wayar:model="pemegang tempat"ujian">
<input datepicker=""wayar:model="start"datepicker-format="dd.mm.yyyy"type="teks"
</div>
</pra>
<pre class="brush:php;toolbar:false;">/* Test.php */
Ujian kelas memanjangkan Komponen
{
awam $ujian;
awam $mula;
fungsi awam mount()
{
$ini->mula = sekarang()->format('d.m.Y');
}
fungsi awam render()
{
return view('livewire.test');
}
}
</pra>
<p>Pemilih tarikh yang saya gunakan ialah Flowbite Datepicker. </p>
<p>Apabila saya menukar tarikh dan kemudian menukar medan input ujian, pemilih tarikh ditetapkan semula kepada tarikh hari ini. </p>
<p>Apakah yang perlu saya lakukan untuk mengekalkan nilai permulaan? </p>
<p><strong>Apakah yang telah saya cuba? </strong>
Saya cuba menggunakan wire:ignore pada pemilih tarikh tetapi itu tidak membantu. </p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya melakukan beberapa penyahpepijatan di sini dan mendapati bahawa dalam kod pemilih tarikh, kita boleh menggunakan acara "changeDate" untuk menyambungkannya dengan Livewire. Tidak pasti mengapa ini tidak didokumenkan. Ini kodnya:
Pandangan komponen:
<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>Komponen:
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'); } }Dan kod HTML yang mengandungi komponen Livewire, dan kod js yang mendengar acara pemilih tarikh Flowbite dan mencetuskan acara Livewire selepas itu.
<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>Berfungsi seperti yang diharapkan dalam persekitaran saya. Ceria