浏览器f12控制台怎么获取vue实例,并且修改data数据

我们在日常的生产工作中,经常会遇到一些问题,比如,若产品已经部署,或是目前无法查看源代码,或者向用命令直接修改查询默认表单数据,那我们怎么去查看Vue实例呢?

我们在浏览器直接打印this不能得到Vue实例,因为在浏览器,this指向的是Windows。

获取Vue实例步骤

  1. 首先我们在浏览器端打开F12,找到Vue挂载的这个组件,获取到元素

这个有时候需要猜组件的结构,简单的组件测试,第一层Vue实例,一般挂载到id为app的元素上var vueEle = document.getElementById("app")

如果是子组件,可以先获取,然后看看有没有__vue__这个属性值,如果有,代表它挂载了Vue实例

  1. 然后我们用元素._vue_来打印这个Vue实例

    vueEle.vue

  1. 用 元素.vue.$data获取或者改变组件data数据

    vueEle.vue.$data

  1. 获取或改变组件data中某个变量的数据

    补充获取iframe中元素的方法
js 复制代码
document.getElementById("iframe000032").contentWindow.document.querySelector("#app")
相关推荐
北风toto1 分钟前
为什么 IntelliJ IDEA Community 无法开发 Vue?——附解决方案
java·vue.js·intellij-idea
@PHARAOH5 分钟前
HOW - 构建一个轻量前后端一体服务
前端·微服务·服务端
无限进步_16 分钟前
【C++】C++11的类功能增强与STL变化
java·前端·数据结构·c++·后端·算法
一只小小Java18 分钟前
Echarts单表多图实现
前端·javascript·echarts
跟着珅聪学java18 分钟前
Element UI 的 Tabs 标签页开发教程
javascript·vue.js·elementui
dunky27 分钟前
Spring AI 深度解析:把 LLM 抽象成 Spring Bean 的底层逻辑
前端
星栈28 分钟前
Rust WASM 文件上传全链路:从浏览器到 S3,一个字节都不能少
前端·前端框架·开源
濮水大叔28 分钟前
告别 Django Admin!这个 NodeJS 全栈框架让你在 DTO 中直接配置 Table/Form 渲染
前端·typescript·node.js
JarvanMo28 分钟前
Flutter 3.44 & Dart 3.12重磅发布!这些新特性太香了
前端
竹林81829 分钟前
用Viem替换ethers.js:一次合约交互的"减负"实战,我总算把TypeScript类型搞明白了
前端·javascript