代码之家 › 专栏 › 技术社区 › nowox

如何从JS控制台访问Vue组件中的变量?

vue.js

nowox · 技术社区 · 6 年前

<template>
  <div>{{hello}}</div>
</template>
<script>
export default {
  data() {
    hello: "Hello World!",
    secret: "The answer is 42"
  }
}
</script>

我怎样才能得到并操纵 secret 从Chrome调试控制台?

这可能吗?

1 回复 | 直到 6 年前

zero298 6 年前

在Vue.js论坛上也有类似的讨论。明确地, SevenLines post on Mar 25 2018 内容如下:

控制台,选择所需组件,然后通过 $vm变量。使用示例检查图像:

aNulliHate 5 年前

// if result is single element
document.getElementById('app').__vue__

// if result is multiple elements
document.getElementsByClassName('some-class')[0].__vue__

假设你的条目使用了id应用程序

也可以在其他元素中执行此操作,只要标识为Vue组件 element

krubo 5 年前

下面是我放在控制台中的内容,它会立即修改页面上显示的数据:

myapp = app.__vue__.$children[0]
myapp.hello = 'Bonjour'
myapp.hello = 'Buenos dias'

奇怪的是,如果跳过将对象分配给变量,它将无法按预期工作:

app.__vue__.$children[0].hello = 'Bonjour'       // first time it works
app.__vue__.$children[0].hello = 'Buenos dias'   // second time it doesn't work

推荐文章

base · 单击按钮时,如何从父组件打开位于子组件中的模态?

5 月前

Ben Foltz · 更新/删除递归子组件

6 月前

Andy BnOne · 我可以为泛型类型的道具设置默认值吗

6 月前

Felix · 更改vuetify v-field标签字体大小

7 月前

user2263572 · Vue.js在脚本与模板中调用util时的不同功能(以及考虑模板解包)

7 月前

CentralDev · 如何导出和导入js文件?

10 月前

Michael · 在Nuxt/Vue中安装传单的正确方法

10 月前

gespinha · 当元素不再可见时,如何更改ref元素?

11 月前

Brad · Vue Child组件对检索到的pinia/vueFire对象失去反应性

11 月前

gespinha · 使用Vue Router时,路由参数不会在Vue组件内渲染

11 月前