Skip to content
Advertisement

How to access Vue data in Vue-CLI in browser console

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>
Advertisement