首页  >  问答  >  正文

"日期选择器在Livewire更新时被重置"

<p>我有一个非常简单的Livewire组件,其中包含一个文本字段和一个日期选择器:</p> <pre class="brush:html;toolbar:false;"><!-- test.blade.php --> <div> <input type="text" wire:model="test" placeholder="测试"> <input datepicker="" wire:model="start" datepicker-format="dd.mm.yyyy" type="text" placeholder="日期 ..."> </div> </pre> <pre class="brush:php;toolbar:false;">/* Test.php */ class Test extends Component { public $test; public $start; public function mount() { $this->start = now()->format('d.m.Y'); } public function render() { return view('livewire.test'); } } </pre> <p>我使用的日期选择器是Flowbite Datepicker。</p> <p>当我更改日期然后更改测试输入字段时,日期选择器会重置为今天的日期。</p> <p>我需要做什么来保持start的值?</p> <p><strong>我已经尝试过什么?</strong> 我尝试在日期选择器上使用wire:ignore,但这没有帮助。</p>
P粉696146205P粉696146205443 天前522

全部回复(1)我来回复

  • P粉807471604

    P粉8074716042023-08-26 14:38:51

    我在这里做了一些调试,发现在日期选择器的代码中,我们可以使用“changeDate”事件来将其与Livewire连接起来。不知道为什么这一点没有被记录下来。 以下是代码:

    组件视图:

    <div>
    <input type="text" wire:model="test" placeholder="测试">
    <input name="start" id="startInput" inline-datepicker="" wire:model="start" datepicker-format="dd.mm.yyyy" type="text" placeholder="{{$start}}" value="{{$start}}" datepicker-autohide>
    
    <br>
    <br>
    当前属性:
    <hr>
    <div>
        {{$test}} <br>
        {{$start}}
    </div>
    </div>

    组件:

    namespace App\Http\Livewire;
    
    use Livewire\Component;
    
    class SomeComponent extends Component
    {
    public $test;
    public $start;
    
    protected $listeners = ['changeDate' => 'changeDate'];
    
    public function changeDate($date)
    {
        $this->start = $date;
    }
    
    public function mount()
    {
        $this->start = now()->format('d.m.Y');
    }
    
    public function render()
    {
        return view('livewire.some-component');
    }
    }

    以及包含Livewire组件的HTML代码,以及监听Flowbite日期选择器事件并在此之后触发Livewire事件的js代码。

    <body>
    <div>
    
        <br>
        <br>
    
        @livewire('some-component')
    </div>
    <script>
        document.getElementById("startInput").addEventListener("changeDate", function (e) {
            Livewire.emit('changeDate', e.detail.datepicker.inputField.value)
        });
    </script>
    @livewireScripts
    </body>

    在我的环境中按预期工作。 干杯

    回复
    0
  • 取消回复