Блог

У меня есть приложение VueJS (скомпилированное), в котором есть поле ввода и кнопка отправки. Кнопка проверяет, не пуст ли ввод. Когда я ввожу значение во ввод и нажимаю кнопку, оно работает нормально.

Могу ли я установить входное значение с помощью javascript ( из консоли chrome ) ?

Я пытался с

 document.querySelectorAll('.form input')[0].dispatchEvent(new Event('focus'));
document.querySelectorAll('.form input')[0].value = 1
document.querySelectorAll('.form input')[0].dispatchEvent(new KeyboardEvent('keypress',{'key':'1'}));   
 

а затем нажмите кнопку отправить, но там написано «поле пусто». Похоже, что это не обновляет модель.

Какая-нибудь помощь?

Спасибо

Если у вас установлены devtools, вы можете использовать $vm0 в качестве выбранного экземпляра, если нет, выберите свой HTML-элемент, содержащий приложение, и используйте .__vue__

Чтобы получить доступ к модели экземпляра, просто используйте данные. Поэтому, если ваши входные данные привязаны к переменной данных под названием «Поиск», вам просто нужно это изменить.

 const vm = document.getElementById('web-page').__vue__
vm.$data.search = 'searching...'