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

This topic created in 1532 days ago, the information mentioned may be changed or developed.

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

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

Vue

输入框

框赋值

DOM

10 replies • 2022-03-11 13:54:36 +08:00

LeeReamond

Mar 10, 2022 via Android

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

gauzung

Mar 10, 2022

/t/743219

ochatokori

Mar 10, 2022 via Android

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

LieFlatjune

Mar 10, 2022

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

LieFlatjune

Mar 10, 2022

@LeeReamond 3 楼的方法可以

ochatokori

Mar 10, 2022 via Android

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

Envov

Mar 10, 2022

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

temp.xxx=1233

Jaufey

Mar 10, 2022

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

weixiangzhe

Mar 11, 2022

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

https://v2ex.com/t/743219

weixiangzhe

Mar 11, 2022

需要自已触发一个事件

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