Vue3 从控制台访问组件数据属性

Posted 2023-02-22

【中文标题】Vue3 从控制台访问组件数据属性

【英文标题】：Vue3 access component data attribute from console

【发布时间】：2021-07-15 12:47:27

【问题描述】：

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

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

Vue.js 开发工具截图和数据：

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

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

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

【参考方案1】：

截至 Vue.js 开发工具 v6.0.0 beta 15:

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

或者如果您的状态根据Composition API 移动到setup：

$vm0.setupState.isCalendarAttached

注意：

Vue.js devtools v5 不支持 Vue 3，因此需要 v6 测试版。 您仍然需要确保首先在 devtools 中选择了您的 Vue 组件。