tampermonkey 触发 vuejs 网页中 input 控件的 v-model 双向同步

在 tampermonkey 模拟自动提交数据

$('input[placeholder="text1"]')[0].value = 1;
$('input[placeholder="text2"]')[0].value = 2;
$('.submit .btn')[0].click();

运行之后，总是提示，没有填写数据。。。

看了一下页面中的 js，发现提交部分是用 vuejs 写的，input 的值存储在 vuejs data 的变量中。

理论上，input 是设置了 v-model 双向绑定，数据在填写之后会自动同步到 data 相应变量中。

所以，做了一下修改

$('input[placeholder="text1"]')[0].value = 1;
$('input[placeholder="text1"]')[0].dispatchEvent(new Event('input'));
$('input[placeholder="text2"]')[0].value = 2;
$('input[placeholder="text2"]')[0].dispatchEvent(new Event('input'));
$('.submit .btn')[0].click();

就可以了。

原因是，v-model 只不过是个语法糖，底层还是监听的 input 事件。

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式