当网页使用vue.js双向绑定的表单内容时，直接用js修改表单对象的value属性是不会更新对应数据的，在自动化测试或者自从填表程序中产生了一定的麻烦，例如下面这个例子 网页内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>vue demo</title> </style> <script src="./vue-2.6.12.js"></script> </head> <body> <div id="app1" v-cloak> <input id="username" type="text" name="username" v-model="username"> </div> <script> var app1 = new Vue({ el: "#app1", data: { username: "hello " } }); </script> </body> </html>
当页面渲染完成，用控制台执行代码
let uname = document.getElementById("username");
uname.value="my_new_name";
此时，页面上input文本框里面的内容变成了my_new_name
但是打印变量 app1.data 查看属性发现
username还是hello
因为vue是根据事件来双向绑定的，当没有触发事件的时候，绑定逻辑就不会发生，所以这里仅仅是html内容更改了，但实际数据没变。需要手动触发一下事件，input文本框就是input事件，其他表单可能是change事件，具体情况需要自行调整。
再补一句
uname.dispatchEvent(new Event('input'));
此时再次打印app1
数据已经同步了