Vuejs，從 chrome 檢查器控制台設置綁定到 model 的輸入值

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'}));   

然后按下提交按鈕，但它說“字段為空”。 似乎這樣做不會更新 model。

有什么幫助嗎？

謝謝

Answer 1

如果您安裝了 devtools，您可以使用 $vm0 作為所選實例，如果不是 select 您的 HTML 元素包含應用程序並使用.__vue__

要訪問實例的 model，只需使用數據即可。 因此，如果您的輸入綁定到一個名為的數據變量，您只需更改它。

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