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

Question

我有一个像这样的模板：

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

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

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

这可能吗？

Answer 1

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

  

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

     

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组件即可 element

并通过tag / id / class获取元素

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