使用js设置输入元素值时如何触发更改事件

Question

我想写一个可以自动填充密码的chrome扩展。代码如下：

//get the account
document.querySelector("input[type=text]").addEventListener('input', () => {
    fillPassword();
})

function fillPassword() {
    let password = '';
    // some operation to get password
    document.querySelector("input[type=password]").value = password
}

一切正常，密码已获得并正确“设置”，期待登录。当我单击登录按钮时，它会通知我“密码不能为空”。所以这是我的想法。

由于网站是vue写的，没有触发change事件，登录表单中也没有设置密码。所以我现在的问题是如何触发 input 的 change 事件，让它的值可以被 vue 正确的捕获。

我试图验证我的想法，所以我在密码输入中添加了一个监听器。

//get the account
document.querySelector("input[type=text]").addEventListener('input', () => {
    fillPassword();
})

document.querySelector("input[type=password]").addEventListener('change', () => {
    console.log('changed')
})

function fillPassword() {
    let password = '';
    // some operation to get password
    document.querySelector("input[type=password]").value = password
}

并且没有预期的打印。然后我尝试触发change事件，但是好像不行。

const e = new Event("change");
const element = document.querySelector("input[type=password]")
element.value = password;
element.dispatchEvent(e);

Answer 1

哦，我修好了。确实触发了更改事件，但 v-model 监听输入是 input 事件。所以我把change事件改成input，就可以正常使用了。