V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
LieFlatjune
V2EX  ›  问与答

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

  •  
  •   LieFlatjune · 2022-03-10 14:33:39 +08:00 · 1902 次点击
    这是一个创建于 993 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    https://v2ex.com/t/743219
    weixiangzhe
        10
    weixiangzhe  
       2022-03-11 13:54:36 +08:00
    需要自已触发一个事件

    ```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
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5494 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 08:33 · PVG 16:33 · LAX 00:33 · JFK 03:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.