Set Livewire value in JavaScript with defer

Question

I have a date picker inside a Livewire component which I'm setting the value of via JavaScript as the Bootstrap datepicker does not update the value automatically:

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

This works great, however the picker disappears when the Livewire update occurs (as expected). Is there a way to update due_date via JavaScript but have it deferred in the same way as setting wire:model.defer="due_date" so it's sent on the next network update rather than instantly?

Tomerikoo · Accepted Answer · 2022-01-18 07:56:01Z

5

Use:

@this.set('prop', value, true)

The third argument of true is for defer.

edited Jan 18, 2022 at 7:56

Tomerikoo

19.6k16 gold badges57 silver badges68 bronze badges

answered Jan 18, 2022 at 7:50

Rafael

512 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Set Livewire value in JavaScript with defer

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related