如何通过WebView2向Vue文本框（textarea）输入值并提交表单？

直接修改textarea的innerHTML虽然能更新显示，但Vue的响应式系统依赖数据绑定和事件监听（比如input事件）同步视图与数据，这种DOM操作不会触发Vue的更新逻辑，导致表单提交时无法获取到修改后的值。

可行解决方案：设置value并触发input事件 #

通过修改textarea的value属性，再手动触发input事件，让Vue感知到内容变化并更新绑定的数据，脚本示例如下：

const textarea = document.querySelector("#app > div > main > div > aside > div.container.fluid > div:nth-child(2) > div > form > div > div > div.v-input__slot > div > textarea");
// 设置textarea的实际值
textarea.value = "Hello World!";
// 触发input事件，触发Vue的响应式更新
textarea.dispatchEvent(new Event('input', { bubbles: true }));

原理说明 #

• Vue的v-model指令本质上绑定了value属性和input事件，用户输入时触发input事件，Vue随之更新对应的数据；
• 直接修改DOM的innerHTML不会触发该事件，也不会更新Vue内部的响应式数据，所以提交时表单拿不到值；
• 手动触发input事件后，Vue会像处理用户输入一样更新数据，确保提交时能获取到最新内容。

不推荐的方案（依赖内部实现） #

如果能找到textarea对应的Vue实例，也可以直接修改其绑定的数据，但这种方式依赖Vue的内部属性（如__vue__），不同版本可能存在差异，且需要明确知道绑定的data字段名，通用性较差：

const textarea = document.querySelector("#app > div > main > div > aside > div.container.fluid > div:nth-child(2) > div > form > div > div > div.v-input__slot > div > textarea");
// 获取Vue实例（不同版本可能是_vnode.context）
const vueComp = textarea.__vue__;
// 修改对应的数据字段（需根据页面实际data字段调整）
vueComp.address = "Hello World!";

内容的提问来源于stack exchange，提问作者MMLC