vue.js - Vue3 从控制台访问组件数据属性

Question

如何从 Vue 3 的控制台访问组件数据属性值？

当我在 vue2 中工作时，我正在使用$vm0并设置和获取任何组件属性值来访问它，但这在 Vue 3 中不起作用。

带有数据的 Vue.js devtools 屏幕截图：

在这里，我想isCalendarAttached从 Chrome 控制台访问，但我无法：

这是我的应用程序对象，它是根组件：

有什么方法可以从控制台访问该变量吗？

标签： vue.jsvuejs2vue-componentvuejs3laravel-mix-vue3

Answer 1

从 Vue.js devtools v6.0.0 beta 15 开始：

$vm0.ctx.isCalendarAttached // Read-only
$vm0.ctx.$data.isCalendarAttached

或者，如果您的状态移动到setup每个Composition API中：

$vm0.setupState.isCalendarAttached

笔记：

1. Vue.js devtools v5 不支持 Vue 3，因此需要 v6 beta。
2. 你仍然需要确保你首先在 devtools 中选择了你的 Vue 组件。