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

[LieFlatjune]

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

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

[LeeReamond]

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

[gauzung]

/t/743219

[ochatokori]

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

[LieFlatjune]

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

[LieFlatjune]

@LeeReamond 3 楼的方法可以

[ochatokori]

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

[Envov]

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

temp.xxx=1233

[Jaufey]

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

[weixiangzhe]

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

https://v2ex.com/t/743219

[weixiangzhe]

需要自已触发一个事件

```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