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