怎么用 Js 脚本给 Vue 输入框赋值

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1417 天前的主题，其中的信息可能已经有所发展或是发生改变。

直接用 dom 的方式可以修改输入框内容，但是不能触发 Vue 内部响应式，vue 项目最后也无法获取输入框内的值

请问有什么方式，可以让 js 模拟输入事件，操作表单内容

Vue

输入框

框赋值

DOM

10 条回复 • 2022-03-11 13:54:36 +08:00

LeeReamond

2022 年 3 月 10 日 via Android

不是很熟悉 vue 代码，不过如果是 vue2 项目的话理论上你去找对应绑定的数据结构，他是一个被 vue 劫持后的数据，本身带有 getter 和 setter 触发响应式，显示调用大概可解

gauzung

2022 年 3 月 10 日

/t/743219

ochatokori

2022 年 3 月 10 日 via Android

先获取 dom ，再用 dom.__vue__拿到 vue 组件实例，然后想怎么改就怎么改

LieFlatjune

2022 年 3 月 10 日

@ochatokori 刚刚亲测这个方法是可以的，不过得拿最外层的组件才可以。👍👍👍👍👍

LieFlatjune

2022 年 3 月 10 日

@LeeReamond 3 楼的方法可以

ochatokori

2022 年 3 月 10 日 via Android

@LieFlatjune #4 不一定是最外层，只要是 vue 组件的顶层都可以，换句话说就是组件实例的$el 绑定的元素

Envov

2022 年 3 月 10 日

再说一个，组件 create 之后 window.temp=this:

temp.xxx=1233

WhateverYouLike

2022 年 3 月 10 日

是的，只要拿到 Vue 实例就可以。最近因为要把原生 JS 和 build 后的 Vue 组件揉到一起，也碰到这样的问题。

weixiangzhe

2022 年 3 月 11 日

参考我这个贴子里我的回复，大概是和你写测试用例时是一致的

https://v2ex.com/t/743219

weixiangzhe

2022 年 3 月 11 日

需要自已触发一个事件

```js
const mouseClickEvents = ['mousedown', 'click', 'mouseup'];
function simulateMouseClick(element){
mouseClickEvents.forEach(mouseEventType =>
element.dispatchEvent(
new MouseEvent(mouseEventType, {
view: window,
bubbles: true,
cancelable: true,
buttons: 1
})
)
);
}

var element = document.querySelector('div[class="UFIInputContainer"]');
simulateMouseClick(element);
```

来自 https://stackoverflow.com/questions/40091000/simulate-click-event-on-react-element