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

mbyulnm0 于 2023-03-19 发布在 Vue.js

关注(0)|答案(4)|浏览(273)

我有一个这样的模板：

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

如何从Chrome调试控制台获取并操作secret的值？
我已经安装了Vue扩展，它允许我查看我的组件和变量。我想做的是得到这些变量并操纵它们。
这可能吗？

vue.js

来源：https://stackoverflow.com/questions/51848439/how-to-access-variables-in-a-vue-component-from-the-js-console

4条答案

按热度按时间

gopyfrb31#

在Vue.js论坛上也有类似的讨论，具体来说，SevenLines post on Mar 25 2018是这样写的：
从2018年起更新。如果您使用vue-devtools，您可以通过选择所需的组件从控制台访问Vue，然后通过$vm变量访问它。

赞(0）回复(0）举报 2023-03-19

oyxsuwqo2#

我用这个

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

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

假设您使用id #app作为条目
只要标识为Vue组件element，也可以在其他元素中执行此操作
并通过标签/id/类获取元素

赞(0）回复(0）举报 2023-03-19

kfgdxczn3#

下面是我在控制台中输入的内容，它会立即修改页面上显示的数据：

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

赞(0）回复(0）举报 2023-03-19

inkz8wg94#

2023年，Vue 3将访问：