Rumah  >  Soal Jawab  >  teks badan

"Pemilih tarikh ditetapkan semula pada kemas kini Livewire"

<p>Saya mempunyai komponen Livewire yang sangat ringkas yang mengandungi medan teks dan pemilih tarikh: </p> <pre class="brush:html;toolbar:false;"><!-- test.blade.php --> <div> <jenis input="teks" wayar:model="pemegang tempat"ujian"> <input datepicker=""wayar:model="start"datepicker-format="dd.mm.yyyy"type="teks" </div> </pra> <pre class="brush:php;toolbar:false;">/* Test.php */ Ujian kelas memanjangkan Komponen { awam $ujian; awam $mula; fungsi awam mount() { $ini->mula = sekarang()->format('d.m.Y'); } fungsi awam render() { return view('livewire.test'); } } </pra> <p>Pemilih tarikh yang saya gunakan ialah Flowbite Datepicker. </p> <p>Apabila saya menukar tarikh dan kemudian menukar medan input ujian, pemilih tarikh ditetapkan semula kepada tarikh hari ini. </p> <p>Apakah yang perlu saya lakukan untuk mengekalkan nilai permulaan? </p> <p><strong>Apakah yang telah saya cuba? </strong> Saya cuba menggunakan wire:ignore pada pemilih tarikh tetapi itu tidak membantu. </p>
P粉696146205P粉696146205393 hari yang lalu471

membalas semua(1)saya akan balas

  • P粉807471604

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

    Saya melakukan beberapa penyahpepijatan di sini dan mendapati bahawa dalam kod pemilih tarikh, kita boleh menggunakan acara "changeDate" untuk menyambungkannya dengan Livewire. Tidak pasti mengapa ini tidak didokumenkan. Ini kodnya:

    Pandangan komponen:

    <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>

    Komponen:

    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');
    }
    }

    Dan kod HTML yang mengandungi komponen Livewire, dan kod js yang mendengar acara pemilih tarikh Flowbite dan mencetuskan acara Livewire selepas itu.

    <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>

    Berfungsi seperti yang diharapkan dalam persekitaran saya. Ceria

    balas
    0
  • Batalbalas