recherche

Maison  >  Questions et réponses  >  le corps du texte

« Réinitialisation du sélecteur de date lors de la mise à jour Livewire »

<p>J'ai un composant Livewire très simple qui contient un champ de texte et un sélecteur de date : </p> <pre class="brush:html;toolbar:false;"><!-- test.blade.php --> <div> <type d'entrée="texte" wire:model="test" placeholder="test"> <input datepicker="" wire:model="start" datepicker-format="jj.mm.aaaa" type="texte" placeholder="Date..."> </div> ≪/pré> <pre class="brush:php;toolbar:false;">/* Test.php */ classe Test étend le composant { public $test ; public $début ; fonction publique mount() { $this->start = now()->format('d.m.Y'); } fonction publique render() { return view('livewire.test'); } } ≪/pré> <p>Le sélecteur de date que j'utilise est Flowbite Datepicker. </p> <p>Lorsque je change la date, puis que je modifie le champ de saisie du test, le sélecteur de date se réinitialise à la date du jour. </p> <p>Que dois-je faire pour conserver la valeur de départ ? </p> <p><strong>Qu’ai-je déjà essayé ? </strong> J'ai essayé d'utiliser wire:ignore sur le sélecteur de date mais cela n'a pas aidé. </p>
P粉696146205P粉696146205490 Il y a quelques jours593

répondre à tous(1)je répondrai

  • P粉807471604

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

    J'ai fait quelques débogages ici et j'ai découvert que dans le code du sélecteur de date, nous pouvons utiliser l'événement "changeDate" pour le connecter à Livewire. Je ne sais pas pourquoi cela n'a pas été documenté. Voici le code :

    Vue des composants : 

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

    Composants : 

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

    Et le code HTML qui contient le composant Livewire et le code js qui écoute l'événement du sélecteur de date Flowbite et déclenche l'événement Livewire après cela. 

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

    Fonctionne comme prévu dans mon environnement. Bravo

    répondre
    0
  • Annulerrépondre