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

Question

我有一个这样的模板：

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

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

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

这可能吗？

原文由 nowox 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Vue.js 论坛上有类似的讨论。具体来说， SevenLines 于 2018 年 3 月 25 日发布的帖子 内容如下：

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

原文由 Xixis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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 元素

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

原文由 aNulliHate 发布，翻译遵循 CC BY-SA 4.0 许可协议