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

【问题标题】：How to access variables in a Vue component from the JS Console?如何从 JS 控制台访问 Vue 组件中的变量？
【发布时间】：2019-01-21 17:24:07
【问题描述】：

我有一个这样的模板：

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

如何从 Chrome 调试控制台获取和操作 secret 的值？

我已经安装了 Vue 扩展，它允许我查看我的组件并查看变量。我想做的是获取这些变量并操纵它们。

这可能吗？

【问题讨论】：

如果您在调试/测试模式下运行 vue，您是否尝试过访问控制台中的值、分配新值等
没试过，不知道怎么取值。是不是类似于window.vue.mycomponent.data.foo？
直接在控制台给模板中定义的vue变量或prop赋值
我不明白你的意思。在我的控制台中，我有这个提示：>。如果我想更改secret的值，我应该写什么？
foo = "newvalue" 即。如果 foo 是已经定义的 vue 属性

标签： vue.js

【解决方案1】：

Vue.js 论坛上有类似的讨论。具体来说，SevenLines post on Mar 25 2018 内容如下：

2018 年更新。如果你使用 vue-devtools，你可以从控制台通过选择所需的组件，然后通过访问它 $vm 变量。用示例检查图像：

【讨论】：

好的...答案是$vm0.secret then。

【解决方案2】：

我用这个

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

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

假设您使用 id #app 作为您的条目

在其他元素中也可以这样做，只要标识为Vue Component element

并通过标签/id/类获取元素

【讨论】：

我无法在生产模式下获得这个...可能是什么原因以及解决方案是什么？
对于 Vue3，它似乎是 __vue_app__，而不是 __vue__。 document.getElementById('app').__vue_app__

【解决方案3】：

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

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

【讨论】：

知道为什么自动完成功能在未分配给变量时不起作用。奇怪！！