Vue如何通过浏览器控制台查看全局data值
作者：第一段代码
在写vue项目时想到一个问题,项目里面的文件都是一个个的组件,如何在控制台中修改,查看组件data里的值呢,下面这篇文章主要给大家介绍了关于Vue如何通过浏览器控制台查看全局data值的相关资料,需要的朋友可以参考下
Vue中借助data实现了数据的存储和中转,方便了界面的绑定渲染和值使用.
一些时候,为了调试程序,我们可能需要通过浏览器来查看data中的值到底目前是一个什么情况,方便调试和查找问题.
而现有基于Vue-cli框架和单个页面的Vue在定义时,会导致data获取值方法不相同.尤其是通过Vue-cli创建的,里面的文件都是一个个的组件，如何在控制台中修改，查看组件data里的值??
(1)没有或找不到具体的Vue对象
发现很多通过Vue-Cli创建的具体页面在定义data后,export时,多半没有对象(直接页面),如下:
export default {
data() {
return {
locale,
labelCol: { span: 2 },
wrapperCol: { span: 20 },
other: "",
form: {
name: "",
goodsType: undefined,
goodsTime: undefined,
delivery: false,
type: [],
goodsDesc: "",
这样,我们在浏览器中没有对外的对象,怎么获取data值,确实令人抓头...
方法,解助,created方法,在该方法中定义一个myData全局对象实例并指向当前对象this,来获取实例.并通过windows暴露给全局,代码如下:
created() {
window.myData = this;//将变量全局化,这样浏览器可以查看当前data是什么情况::myData._data
这样,在浏览器控制台,直接使用myData对象就可以获取到值,获取data值,通过myData._data
(2)Vue在外层定义了实例来包裹整个对象
传统的html形式引用vue可以通过给最外层的vue实例命名方式.这种方式,就比较直接简单了,可直接通过该实例直接获取.
