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

Question

我有一个像这样的模板：

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

如何secret从Chrome调试控制台获取和操纵其价值？

我已经安装了Vue扩展，它使我可以查看组件并查看变量。我想做的就是获取这些变量并对其进行操作。

这可能吗？

Answer 1

我用这个

// 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/类获取元素

Answer 2

Vue.js论坛上有类似的讨论。具体而言，SevenLines在2018年3月25日发布的内容为：

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

Answer 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