js触发v-model修改

https://www.cnblogs.com/hsmWorld/p/10044447.html

v-model只是一种语法糖，底层的方法还是去监听input事件。所以可以使用dispatchEvent事件给元素分配一个input事件，这样可以手动触发 inputElement 的 input 事件，同时可以触发 v-model 机制。IE 好像不支持（但可以 polyfill）。

el.value(newval)
el.dispatchEvent(new Event('input'));
el为input元素

使用
获取某个vue网站元素，进行自动登录操作

// login页面
<div class="block">
    <span class="iconfont">&#xe668;</span>
    <input type="text" v-model.trim="username" placeholder="请输入账号" @keyup.enter="login">
</div>
<div class="block">
    <span class="iconfont">&#xe64b;</span>
    <input type="password" v-model.trim="password" placeholder="请输入密码" @keyup.enter="login">
</div>
<div class="submit">
    <button class="button" v-show="type===1" @click="login">立即登录</button>
</div>

如果我们想要直接获取input框，然后自动填充密码的话，比较简单，如下：

let inputs = document.querySelectorAll('input');
inputs[0].value = 'xxxx';
inputs[1].value = 'xxx';

但是我们发现，填充完毕后，v-model绑定的值并没有发生变化，这种情况下trigger click的话，会触发非空校验，导致页面永远也不会进行登录接口请求，所以，我们需要手动触发v-model绑定值发生变化，再进行click操作，代码如下：

// 自动登录账号
let inputs = document.querySelectorAll('input');
inputs[0].value = 'xxxx';
inputs[1].value = 'xxxx';
const event = new Event('input');
inputs[0].dispatchEvent(event);
inputs[1].dispatchEvent(event);
document.querySelector('.button').click()

注意：
如果v-model有lazy修饰符的时候，触发得是change事件
el.dispatchEvent(new Event(‘change’));