Livewire dan flatpickr: perubahan apabila mengendalikan data kosong

Question

Penafian: Saya tahu terdapat beberapa soalan tentang cara menggandingkan Livewire dan flatpickr, tetapi saya tidak faham penyelesaian yang diberikan kerana ia sangat berbeza daripada cara saya menangani masalah tersebut. Setelah berkata demikian, saya masih belajar Livewire, jadi saya mungkin salah melakukannya.

Saya mempunyai komponen Livewire di mana saya menggunakan flatpickr untuk memilih tarikh dan masa.

<div class="mb-3" >
    <input id="chosendatetime" type="datetime-local" name="chosendatetime" value="{{ old('chosendatetime') }}" 
               wire:model.debounce.500ms="chosendatetime" />
</div>

Dalam komponen bilah saya juga mempunyai bahagian skrip untuk memulakan flatpickr:

<script>
    flatpickr("#chosendatetime", {
        enableTime: true,
        dateFormat: "d-m-Y H:i",
    });
</script>

Pemilih tarikh dipaparkan dengan betul, tetapi apabila saya menukar nilainya, data yang dihantar oleh pelanggan adalah kosong.

Apa yang perlu saya lakukan?

Answer 1

Kod anda berfungsi dengan baik jika anda menyediakan Livewire dengan betul.

• Pastikan anda mempunyai harta awam yang dipanggil chosendatetime dalam kelas Livewire anda public $chosendatetime;
• Tambah fungsi yang dipanggil updatedChosenDatetime() dan cetak dd()$this->chosendatetime menggunakan untuk melihat sama ada nilai telah diterima
• Pastikan masukkan @livewireStyles和@livewireScripts
dalam templat reka letak anda
• Pastikan anda telah memasukkan JS dan CSS FlatPickr

Kod kelas Livewire adalah seperti berikut:

<?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');
    }
}

Answer 2

Cuba tambah wire:ignore pada elemen div seperti ini:

<div class="mb-3" wire:ignore>
    <input id="chosendatetime" type="datetime-local" name="chosendatetime" value="{{ old('chosendatetime') }}" 
               wire:model.debounce.500ms="chosendatetime" />
</div>

Arahan ini memberitahu Livewire bahawa ia harus melangkau bahagian halaman ini dan biarkan ia tidak berubah apabila komponen dimuat semula. Jika anda tidak menggunakannya, Livewire mungkin menggantikan tika flatpickr dan membuatnya berhenti berfungsi.