Как принудительно заставить Vue.js синхронизировать данные?

Пишу фронт на Vue.js.

Есть инпут, который связан с определенной переменной внутри. Само по себе всё работает хорошо.
На инпуте висит выпадающее меню автокомплита, реализованное сторонней библиотекой.
И есть проблемка: если я выбираю подсказку из меню - текст вставляется в инпут, но Vue не замечает этого изменения! А чтобы он заметил новые данные, нужно внутри инпута ещё что-то набрать (хотя бы пробел например).

Ладно, думаю. Библиотека автокомплита генерит собственные события, надо их слушать и после вставки что-то делать. План логичный, но "что-то делать" - это что именно?

Если искусственно вызвать в инпуте событие редактирования, например вот так:
$('input[type=text]').trigger('input');
то Vue замечает новые данные. Но возникает новая проблема - автокомплит замечает это событие тоже и снова раскрывается. Разумеется, всякие preventDefault и stopPropagation я пробовал - не помогают. Замкнутый круг - либо верхи не хотят, либо низы не могут.

Пробовал лазить внутрь объекта черными путями и вручную вызывать его методы, события... всё бесполезно, потому что они как бы работают, но толку нет - данные-то в переменных всё равно старые. Vue ничего не синхронизировал.

Как вручную заставить его протереть глазки и посмотреть в инпут, чтобы понять, что там появились новые данные?
Гуглил, находил вопросы людей со сходными проблемами, но решения не нашел.

Минималистичный демо-пример: codepen.io/dom1n1k/pen/WoLYvM

update
Получилось решить проблему двойной вставкой данных - сначала библиотека засовывает текст в инпут, а потом я (по событию) ещё и отправляю то же самое в модель. Костыль, конечно, но вроде работает.
  • Вопрос задан
  • 1076 просмотров
Решения вопроса 1
В вашем случае проще всего сделать так

<input type="text" v-model="city" v-on:awesomplete-select="city = $event.text.value">


Просто подписаться на событие, которое срабатывает на элементе при выборе из выпадающего списка
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@lega
1) Можно сделать директиву и навешать на этот инпут которая будет отслеживать изменения DOM и обновлять модель (MutationObserver) - не работает в старых браузерах.
2) Директива которая отслеживает левый сигнал (напр. "update"), и посылать его из библиотеки

Но самое правильное, директива которая биндит эту либу и использует апи либы для обновления модели.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы