英文:
Livewire and flatpickr: null data on change
问题
免责声明： 我知道已经有一些关于如何将 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>
日期选择器被正确渲染，但当我更改其值时，客户端发送的数据为空。
我应该怎么办？
英文:
Disclaimer: I know there are already a few questions regarding coupling Livewire and flatpickr, yet I don't understand the solutions provided, since they are very different from how I'm approaching the problem. That said, I'm still learning Livewire, so I might just be doing it wrong.
I have a Livewire component where I use flatpickr to select both date and time.
<div class="mb-3" >
<input id="chosendatetime" type="datetime-local" name="chosendatetime" value="{{ old('chosendatetime') }}"
wire:model.debounce.500ms="chosendatetime" />
</div>
In the blade component, I have also the script section to init flatpickr:
<script>
flatpickr("#chosendatetime", {
enableTime: true,
dateFormat: "d-m-Y H:i",
});
</script>
The date picker is rendered correctly, but when I change its value the data sent by the client is empty.
What should I do?
答案1
得分: 1
尝试将 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 实例并导致其停止工作。
英文:
try to add wire:ignore to the div element, like this:
<div class="mb-3" wire:ignore>
<input id="chosendatetime" type="datetime-local" name="chosendatetime" value="{{ old('chosendatetime') }}"
wire:model.debounce.500ms="chosendatetime" />
</div>
This directive lets Livewire know that it should skip this part of the page and not change it when the component refreshes. If you don't use it, Livewire could replace the flatpickr instance and make it stop working.
答案2
得分: 0
你的代码运行正常，如果你已经正确设置了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');
}
}
英文:
Your code is working fine, IF you have setup your Livewire properly.
- Make sure you have a public property called chosendatetime in your Livewire class
public $chosendatetime; - Add a function called updatedChosenDatetime() and
dd()the $this->chosendatetime to see if the value is received or not - Make sure you have included
@livewireStylesand@livewireScriptsinside your layout blade. - Make sure you have included FlatPickr JS and CSS
The Livewire class will look like
<?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');
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论