Почему vue watch не работает?

Question

[lolrofl01]

Не уверен, что делаю правильно, но задача стоит такая. Есть инпут, по нажатию на который всплывает календарь - соответственно выбираешь дату, и она меняется в инпуте. Изначально дата стоит - сегодняшний день. Реализация на vue. Календарь, так уж вышло - 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:
<input v-model="theDate" type="text" id="theDate">

Вызов календаря:

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

В результате, в инпуте сегодняшняя дата - все работает. Если нажать на инпут - вылезает календарь. Выбираю любое значение из календаря - в инпуте все меняется, но во vue переменной theDate - все остается по-прежнему без изменений. Vue просто не видит никаких изменений в инпуте, хотя они есть. Я даже искуственно добавил trigger('change') и все равно нет эффекта. В то же время код:

$(document).on('change', '#theDate', function() {
   alert('ok');
});

Срабатывает на отлично.

Задача простая. Изначально в инпуте должна стоять текущая дата, и все расчеты производятся с учетом нее. Если же пользователь выбрал другую дату - то расчеты должны начинаться с этой другой даты. А в моем случае получается, что выбрал что-то юзер или не выбрал - все равно в переменной vue (theDate) лежит сегодняшняя дата без изменений.

Comments

[Александр Шаповал]

Календарь, так уж вышло - jquery datepicker.

https://vuejsexamples.com/tag/calendar/

[Александр Ковальчук]

Александр Шаповал, ну да легче всего подключить так, но где дух авантюризма?

[Александр Шаповал]

Александр Ковальчук, vue облегчает жизнь, зачем усложнять её возвращаясь к jquery

[lolrofl01]

Александр Шаповал, Так в том и дело, что когда с jquery переходишь на vue, кажется, что жизнь напротив сильно усложняется...

Answer 1

[0xD34F]

Во-первых, событие должно быть input, а не change. Во-вторых, нативные события, и события, которые генерирует jquery (на них vue, очевидно, плевать) - это не одно и то же. Так что

$('#dateStart').trigger('change');

следует заменить на что-то вроде

this.dispatchEvent(new Event('input'));

UPD. Пара примеров того, как это может выглядеть:

раз - с использованием jquery-ui datepicker
два - с использованием air-datepicker.

Comments

[lolrofl01]

Спасибо. Только, к сожалению, вылезает ошибка:
TypeError: this.dispatchEvent is not a function

[lolrofl01]

А если написать так:

var self = this;
$('#dateStart').datepicker({
        autoClose: true,
        onSelect: function() {
            self.dispatchEvent(new Event('input'));
        }
    });

То результат как и прежде: никто не видит изменения значения в инпуте, соответственно, ничего и не происходит(

[0xD34F]

вылезает ошибка

Это было ожидаемо. А теперь подумайте, чего не хватает в вашем вопросе. Ну, то есть - информации нет, и я сделал предположение. Оказалось, оно ошибочное. Ну, не повезло. Вам. У меня-то - всё работает, никаких ошибок.

[0xD34F]

Ну чо, никак? ОК, так и быть - протяну вам интеллектуальный костыль.

Календарь, так уж вышло - jquery datepicker.

Гуглим вот этот вот "jquery datepicker", и пробуем посмотреть на результат глазами человека, который больше ничего о вашем коде не знает. Этих дейтпикеров - как собак нерезаных, и какой используете вы, можно только догадываться.

Добавил пару примеров. Дальше думайте сами.