I saw many answers telling to use vue-devtools to access the Vue Object but is there a way to do it in the browser console? Like in the tutorial, we enter
> app.data.sock
in console to get the data
Let’s say:
main.js
import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')
App.vue
<template> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld /> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script>
HelloWorld.vue
<template> <div class="hello"> <ul> <li v-for="title in titles" :key="title.id">{{ title.name }}</li> </ul> </div> </template> <script> export default { name: 'HelloWorld', data() { return { titles: [{ id: 0, name: "a" }, { id: 1, name: "b" }] } } } </script>
How do I access the data of ‘titles’ in HelloWorld.vue? In other word, how to get this.data.titles[0].name
in the HelloWorld.vue in the browser console? Thank you
Advertisement
Answer
You can access the value of data function in created our mounted hooks of Vue lifecycle or can create a function in methods. I am calling your data in created hook
<script> export default { name: 'HelloWorld', data() { return { titles: [{ id: 0, name: "a" }, { id: 1, name: "b" }] } }, created(){ console.log(this.data.tiles) } } </script>