首页  >  问答  >  正文

Livewire和flatpickr:处理空数据时的更改

免责声明:我知道已经有一些关于如何将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粉727416639P粉727416639225 天前425

全部回复(2)我来回复

  • P粉131455722

    P粉1314557222024-04-01 16:06:46

    你的代码运行正常,如果你正确设置了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');
        }
    }

    回复
    0
  • P粉275883973

    P粉2758839732024-04-01 12:22:23

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

    回复
    0
  • 取消回复