Vuejs，从 chrome 检查器控制台设置绑定到模型的输入值

Question

我有一个 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'}));

然后按下提交按钮，但显示“字段为空”。似乎这样做并没有更新模型。

有什么帮助吗？

谢谢

Answer 1

如果您安装了 devtools，您可以使用 $vm0 作为 selected 实例，如果没有 select 您的 HTML 包含应用程序的元素并使用 .__vue__

要访问实例的模型，只需使用数据。因此，如果您的输入绑定到名为搜索的数据变量，您只需更改它即可。

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

Vuejs，从 chrome 检查器控制台设置绑定到模型的输入值

Vuejs , set input value bound to a model from chrome inspector console

javascript

vue.js

google-chrome

inspector