Livewire和flatpickr:处理空数据时的更改
P粉727416639
P粉727416639 2024-03-31 17:22:58
0
2
505

免责声明:我知道已经有一些关于如何将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实例并使其停止工作。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板