L
L
lolrofl012019-02-22 11:59:15
JavaScript
lolrofl01, 2019-02-22 11:59:15

Why is vue watch not working?

I'm not sure what I'm doing right, but the task is such. There is an input, by clicking on which a calendar pops up - accordingly, you select a date, and it changes in the input. Initially, the date is - today. Implementation in vue. Calendar, it just so happens - jquery datepicker.

var today = moment().format('DD.MM.YYYY');

var app = new Vue({
    el: '#wrapper',
    data: {
        theDate: today
    },
    watch: {
        'theDate' : function(value) {
            alert(value);
        }
    }
});


input: Calendar call:
<input v-model="theDate" type="text" id="theDate">

$('#dateStart').datepicker({
        autoClose: true,
        onSelect: function() {
            $('#dateStart').trigger('change');
        }
    });

As a result, today's date in the input - everything works. If you click on the input, the calendar pops up. I select any value from the calendar - everything changes in the input, but in the vue variable theDate - everything remains unchanged. Vue simply does not see any changes in the input, although there are. I even artificially added trigger('change') and still no effect. At the same time the code:
$(document).on('change', '#theDate', function() {
   alert('ok');
});

Works great.

The task is simple. Initially, the current date should be in the input, and all calculations are made taking into account it. If the user has chosen another date, then the calculations should start from this other date. And in my case, it turns out that the user chose something or did not choose it - all the same, the vue variable (theDate) contains today's date without changes.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
0
0xD34F, 2019-02-22
@lolrofl01

First, the event must be input, not change. Secondly, native event handlers (and vue obviously uses them) look askance at the events that jquery generates. So it should be replaced with something like UPD. A couple of examples of what this might look like: one using jquery-ui datepicker two using air-datepicker.
$('#dateStart').trigger('change');
this.dispatchEvent(new Event('input'));

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question