通过浏览器F12开发者工具的javascript控制台给Vue表单赋值 | 您所在的位置:网站首页 › 如何获取vue实例里的data › 通过浏览器F12开发者工具的javascript控制台给Vue表单赋值 |
问题背景
做一个网页表单自动录入软件,网页不是我方开发的。自动录入软件是基于.NET的C/S客户端软件,它使用WinForm的WebBrowser控件加载网站,网站的前端是使用 Vue 和 Element-UI 开发的。 该网站的脚本、资源是用 webpack 打包的,我们遇到的技术问题是无法在浏览器的F12开发者工具JavaScript控制台中使用常规的 JQuery 语法操作其 DOM 元素,给诸如文本框、下拉框、日期选择框赋值。 举个例子:
虽然可以通过 $('#reconciliation > form > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div > div > div > input').value = "cgs"; 给文本框赋值,但是实际上点击查询按钮时,无法通过表单校验,如下: 这正是由于 Vue 的双向绑定导致的。我们只修改了文本框中的值,实际上没有修改 Vue 实例的值。 思路Vue 具有双向绑定属性。所谓双向绑定,指的是 vue 实例中的data 与其渲染的DOM元素的内容保持一致,无论谁被改变,另一方会相应的更新为相同的数据。 所以,要想解决上述问题,我们需要在浏览器的F12开发者工具JavaScript控制台中获取 Vue 实例 。 观察 form 表单,如下: 在JavaScript控制台中打印可以打印Vue实例,如下: 我们可以展开打印的实例,可以找到 model ,可以看到 model 下面都是表单的字段,如下: 现在可以测试一下,通过,,,算了今天太累直接看解决办法吧… 解决办法获取 webbrowser 控件的 HtmlWindows,再将其转换为 IHTMLWindow2 ,然后执行 JavaScript 脚本,问题解决。如下: HtmlWindow htmlWindow = webBrowser1.Document.Window; IHTMLWindow2 win = htmlWindow.DomWindow as IHTMLWindow2; win.execScript($"document.querySelector(\"#js_el_form_create3\").__vue__.model.cvin = '11111111111111111';");在JavaScript中测试,如下: document.querySelector("#js_el_form_create3").__vue__.model.cvinlite = "111111"; |
CopyRight 2018-2019 实验室设备网 版权所有 |