解决Livewire与Flatpickr日期选择器清除过滤器后标签残留问题

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class CrudUsers extends Component
{
    public $filters = [
        'name'             => '',
        'activated_at_date_from' => '', // 确保这个过滤器被清空
        'activated_at_date_till' => '', // 如果有多个日期过滤器，也一并处理
        // ... 其他过滤器
    ];

    public function clearAllFilter()
    {
        $this->filters = [
            'name'             => '',
            'activated_at_date_from' => '',
            'activated_at_date_till' => '',
            // ... 重置所有过滤器到初始状态
        ];

        // 派发一个浏览器事件，通知前端清除Flatpickr
        $this->dispatchBrowserEvent('clear-flatpickr-filters');

        // 可选：日志记录，用于调试
        // \Log::info(varDump($this->filters, ' -1 clearAllFilter $this->filters::'));
    }

    // ... 其他方法和渲染逻辑
}

<div wire:ignore>
    <input
        x-data="{value: @entangle($attributes->wire('model')), instance: undefined}"
        x-init="() => {
                // 监听Livewire模型值的变化，更新Flatpickr显示
                $watch('value', value => instance.setDate(value, false));
                // 初始化Flatpickr实例
                instance = flatpickr($refs.input, {{ json_encode((object)$options) }});

                // 监听Livewire派发的清除事件
                Livewire.on('clear-flatpickr-filters', () => {
                    if (instance) {
                        instance.clear(); // 调用Flatpickr的clear方法
                    }
                });
            }"
        x-ref="input"
        x-bind:value="value"
        type="text"
        {{ $attributes->merge(['class' => 'form-input w-full rounded-md shadow-sm']) }}
    />
</div>

public function clearAllFilter()
{
    // ... 清空过滤器
    $this->dispatchBrowserEvent('clear-flatpickr-by-id', ['id' => 'activated_at_date_from']);
    // 或者派发一个通用事件，前端遍历所有日期选择器
    $this->dispatchBrowserEvent('clear-all-flatpickrs');
}

<div wire:ignore>
    <input
        id="activated_at_date_from" <!-- 确保有ID -->
        x-data="{value: @entangle($attributes->wire('model')), instance: undefined}"
        x-init="() => {
                // ... 初始化Flatpickr
                instance = flatpickr($refs.input, {{ json_encode((object)$options) }});

                // 监听特定ID的清除事件
                Livewire.on('clear-flatpickr-by-id', (data) => {
                    if (data.id === $el.id && instance) { // 检查ID是否匹配当前元素
                        instance.clear();
                    }
                });
                // 或者监听通用事件
                Livewire.on('clear-all-flatpickrs', () => {
                    if (instance) {
                        instance.clear();
                    }
                });
            }"
        x-ref="input"
        x-bind:value="value"
        type="text"
        {{ $attributes->merge(['class' => 'form-input w-full rounded-md shadow-sm']) }}
    />
</div>