Livewire und Flatpickr: Änderungen beim Umgang mit leeren Daten

Question

Haftungsausschluss: Ich weiß, dass es einige Fragen zur Kopplung von Livewire und Flatpickr gab, aber ich verstehe die bereitgestellten Lösungen nicht, da sie sich stark von meiner Herangehensweise an das Problem unterscheiden. Allerdings lerne ich immer noch Livewire, also mache ich es vielleicht einfach falsch.

Ich habe eine Livewire-Komponente, in der ich flatpickr verwende, um Datum und Uhrzeit auszuwählen.

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

In der Blade-Komponente habe ich auch einen Skriptabschnitt zum Initialisieren von flatpickr:

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

Die Datumsauswahl wird korrekt gerendert, aber wenn ich ihren Wert ändere, sind die vom Client gesendeten Daten leer.

Was soll ich tun?

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实例并使其停止工作。