es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Establecer el valor de Livewire en JavaScript con defer.

16 Jul, 2023 Programación

Tengo un selector de fechas dentro de un componente Livewire que estoy configurando su valor a través de JavaScript, ya que el selector de fechas de Bootstrap no actualiza automáticamente el valor:

$('.datepicker').datetimepicker({
    format: 'DD/MM/YYYY',
    icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-chevron-up",
        down: "fa fa-chevron-down",
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove'
    }
}).on('dp.change', function (e) {
    this.due_date = e.target.value;
});

Esto funciona muy bien, sin embargo, el selector desaparece cuando ocurre la actualización de Livewire (como se esperaba). ¿Existe alguna manera de actualizar due_date a través de JavaScript pero posponerlo de la misma manera que al configurar wire:model.defer="due_date" para que se envíe en la próxima actualización de red en lugar de hacerlo instantáneamente?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, puedes utilizar el método defer de Livewire para posponer la actualización de due_date de la misma manera que configurando wire:model.defer="due_date". Simplemente modifica el evento dp.change para llamar al método defer en tu componente de Livewire y pasar due_date como parámetro:

    $('.datepicker').datetimepicker({
    format: 'DD/MM/YYYY',
    icons: {
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-chevron-up",
        down: "fa fa-chevron-down",
        previous: 'fa fa-chevron-left',
        next: 'fa fa-chevron-right',
        today: 'fa fa-screenshot',
        clear: 'fa fa-trash',
        close: 'fa fa-remove'
    }
}).on('dp.change', function (e) {
    Livewire.emit('updateDueDate', e.target.value);
});

// En tu componente de Livewire:
Livewire.on('updateDueDate', function (value) {
    this.defer('due_date', value);
});

    Esto actualizará due_date a través del método defer de Livewire, lo cual pospondrá la actualización hasta la próxima actualización de red.

Comments are closed.