Пишу фронт на Vue.js.
Есть инпут, который связан с определенной переменной внутри. Само по себе всё работает хорошо.
На инпуте висит выпадающее меню автокомплита, реализованное сторонней библиотекой.
И есть проблемка: если я выбираю подсказку из меню - текст вставляется в инпут, но Vue не замечает этого изменения! А чтобы он заметил новые данные, нужно внутри инпута ещё что-то набрать (хотя бы пробел например).
Ладно, думаю. Библиотека автокомплита генерит собственные события, надо их слушать и после вставки что-то делать. План логичный, но "что-то делать" - это что именно?
Если искусственно вызвать в инпуте событие редактирования, например вот так:
$('input[type=text]').trigger('input');
то Vue замечает новые данные. Но возникает новая проблема - автокомплит замечает это событие тоже и снова раскрывается. Разумеется, всякие preventDefault и stopPropagation я пробовал - не помогают. Замкнутый круг - либо верхи не хотят, либо низы не могут.
Пробовал лазить внутрь объекта черными путями и вручную вызывать его методы, события... всё бесполезно, потому что они как бы работают, но толку нет - данные-то в переменных всё равно старые. Vue ничего не синхронизировал.
Как вручную заставить его протереть глазки и посмотреть в инпут, чтобы понять, что там появились новые данные?
Гуглил, находил вопросы людей со сходными проблемами, но решения не нашел.
Минималистичный демо-пример:
codepen.io/dom1n1k/pen/WoLYvM
update
Получилось решить проблему двойной вставкой данных - сначала библиотека засовывает текст в инпут, а потом я (по событию) ещё и отправляю то же самое в модель. Костыль, конечно, но вроде работает.
Простой
