Livewire和flatpickr：處理空資料時的更改

Question

免責聲明：我知道已經有一些關於如何將Livewire和flatpickr耦合的問題，但是我不理解提供的解決方案，因為它們與我處理問題的方式非常不同。話雖如此，我還在學習Livewire，所以可能只是做錯了。

我有一個Livewire元件，在其中我使用flatpickr來選擇日期和時間。

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

在blade元件中，我還有一個用於初始化flatpickr的腳本部分：

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

日期選擇器被正確渲染，但是當我更改其值時，客戶端發送的資料為空。

我該怎麼做？

Answer 1

你的程式碼運作正常，如果你正確設定了Livewire。

• 確保在你的Livewire類別中有一個名為chosendatetime的公共屬性 public $chosendatetime;
• 新增一個名為updatedChosenDatetime()的函數，並使用dd()列印$this->chosendatetime，以查看是否接收到值
• 確保在你的佈局範本中包含@livewireStyles和@livewireScripts
• #確保已經包含了FlatPickr的JS和CSS

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

Answer 2

嘗試將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實例並使其停止工作。