Livewire和flatpickr:處理空資料時的更改
P粉727416639
P粉727416639 2024-03-31 17:22:58
0
2
456

免責聲明:我知道已經有一些關於如何將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>

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

我該怎麼做?

P粉727416639
P粉727416639

全部回覆(2)
P粉131455722

你的程式碼運作正常,如果你正確設定了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');
    }
}
P粉275883973

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板