浏览器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")
相关推荐
uhakadotcom几秒前
Caddy Web服务器初体验:简洁高效的现代选择
前端·面试·github
前端菜鸟来报道3 分钟前
前端react 实现分段进度条
前端·javascript·react.js·进度条
花楸树26 分钟前
前端搭建 MCP Client(Web版)+ Server + Agent 实践
前端·人工智能
wuaro26 分钟前
RBAC权限控制具体实现
前端·javascript·vue
专业抄代码选手31 分钟前
【JS】instanceof 和 typeof 的使用
前端·javascript·面试
用户00798136209732 分钟前
6000 字+6 个案例:写给普通人的 MCP 入门指南
前端
用户876128290737436 分钟前
前端ai对话框架semi-design-vue
前端·人工智能
干就完了139 分钟前
项目中遇到浏览器跨域前端和后端解决方案以及大概过程
前端
我是福福大王41 分钟前
前后端SM2加密交互问题解析与解决方案
前端·后端
实习生小黄44 分钟前
echarts 实现环形渐变
前端·echarts