如何从JS控制台访问Vue组件中的变量？
如何从JS控制台访问Vue组件中的变量？
提问于 2018-08-15 03:20:30
我有一个这样的模板：
<template>
<div>{{hello}}</div>
</template>
<script>
export default {
data() {
hello: "Hello World!",
secret: "The answer is 42"
}
}
</script>如何从Chrome调试控制台获取并操作secret的值？
我已经安装了Vue扩展，它允许我查看我的组件和变量。我想要做的是获得这些变量，并对它们进行操作。
这个是可能的吗？
回答 2
Stack Overflow用户
发布于 2019-10-22 17:04:15
我用这个
// if result is single element
document.getElementById('app').__vue__
// if result is multiple elements
document.getElementsByClassName('some-class')[0].__vue__假设您使用id #app作为您的条目
也可以在其他元素中执行此操作，只要标识为Vue组件element
并通过tag/id/class获取元素
Stack Overflow用户
发布于 2019-10-18 13:10:46
下面是我放在控制台中的内容，它会立即修改页面上显示的数据：
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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51848439
复制相关文章
相似问题