Javascript 如何在浏览器控制台的Vue CLI中访问Vue数据
我看到许多答案告诉我如何使用vue devtools访问vue对象,但有没有办法在浏览器控制台中实现这一点?就像在教程中一样,我们进入Javascript 如何在浏览器控制台的Vue CLI中访问Vue数据,javascript,html,vue.js,vue-cli,Javascript,Html,Vue.js,Vue Cli,我看到许多答案告诉我如何使用vue devtools访问vue对象,但有没有办法在浏览器控制台中实现这一点?就像在教程中一样,我们进入 >app.data.sock 在控制台中获取数据 比如说: main.js 从“vue”导入{createApp} 从“./App.vue”导入应用程序 createApp(App).mount(“#App”) App.vue 从“./components/HelloWorld.vue”导入HelloWorld 导出默认值{ 名称:“应用程序”, 组成部分:
>app.data.sock
在控制台中获取数据
比如说:
main.js
从“vue”导入{createApp}
从“./App.vue”导入应用程序
createApp(App).mount(“#App”)
App.vue
从“./components/HelloWorld.vue”导入HelloWorld
导出默认值{
名称:“应用程序”,
组成部分:{
你好世界
}
}
HelloWorld.vue
- {{{title.name}
导出默认值{
名称:“HelloWorld”,
数据(){
返回{
标题:[{
id:0,
姓名:“a”
},
{
id:1,
姓名:“b”
}]
}
}
}
如何访问HelloWorld.vue中的“标题”数据?换句话说,如何在浏览器控制台的HelloWorld.vue中获取
this.data.titles[0].name
?谢谢您可以在我们的Vue生命周期挂载挂钩中访问数据函数的价值,也可以在方法中创建函数。我正在调用创建的钩子中的数据
导出默认值{
名称:“HelloWorld”,
数据(){
返回{
标题:[{
id:0,
姓名:“a”
},
{
id:1,
姓名:“b”
}]
}
},
创建(){
console.log(this.data.tiles)
}
}
请粘贴完整的组件代码可能这里说的是您:)@AliasgherNooruddin edited了解更多有关已安装和已创建的组件的信息是的,但是否有办法在浏览器本身上实现?例如,在浏览器控制台中输入this.data.titles[0].name
,它将回答a
No它不可能在那里安装vue开发工具您可以随时检查vue对象
<script>
export default {
name: 'HelloWorld',
data() {
return {
titles: [{
id: 0,
name: "a"
},
{
id: 1,
name: "b"
}]
}
},
created(){
console.log(this.data.tiles)
}
}
</script>