LieFlatjune
V2EX  ›  问与答

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

  •  
  •   LieFlatjune · Mar 10, 2022 · 3311 views
    This topic created in 1699 days ago, the information mentioned may be changed or developed.

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

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

    10 replies  •  2022-03-11 13:54:36 +08:00
    LeeReamond
    LeeReamond
    Mar 10, 2022 via Android
    1
    不是很熟悉 vue 代码,不过如果是 vue2 项目的话理论上你去找对应绑定的数据结构,他是一个被 vue 劫持后的数据,本身带有 getter 和 setter 触发响应式,显示调用大概可解
    gauzung
    gauzung
    Mar 10, 2022
    2
    ochatokori
    ochatokori
    Mar 10, 2022 via Android
    3
    先获取 dom ,再用 dom.__vue__拿到 vue 组件实例,然后想怎么改就怎么改
    LieFlatjune
    LieFlatjune
    OP
    Mar 10, 2022
    4
    @ochatokori 刚刚亲测这个方法是可以的,不过得拿最外层的组件才可以。👍👍👍👍👍
    LieFlatjune
    LieFlatjune
    OP
    Mar 10, 2022
    5
    @LeeReamond 3 楼的方法可以
    ochatokori
    ochatokori
    Mar 10, 2022 via Android
    6
    @LieFlatjune #4 不一定是最外层,只要是 vue 组件的顶层都可以,换句话说就是组件实例的$el 绑定的元素
    Envov
    Envov
    Mar 10, 2022
    7
    再说一个,组件 create 之后 window.temp=this:

    temp.xxx=1233
    Jaufey
    Jaufey
    Mar 10, 2022
    8
    是的,只要拿到 Vue 实例就可以。最近因为要把原生 JS 和 build 后的 Vue 组件揉到一起,也碰到这样的问题。
    weixiangzhe
    weixiangzhe
    Mar 11, 2022
    9
    参考我这个贴子里我的回复,大概是和你写测试用例时是一致的

    https://v2ex.com/t/743219
    weixiangzhe
    weixiangzhe
    Mar 11, 2022
    10
    需要自已触发一个事件

    ```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
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   4213 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 01:06 · PVG 09:06 · LAX 17:06 · JFK 20:06
    ♥ Do have faith in what you're doing.