CODEWITHSUNDEEP
vue.js
neubert
neubert

Reputation: 16792

reading vue.js variables from the js console

Let's say I had this:

var app = new Vue({
  el: '#app',
  data: {
    message: Math.random()
  }
})

And let's say that I wanted to see what value data.message had been assigned in the JS console. How would I do this?

Superficially it seems like doing console.log(app.data.message) would do the trick but when I try to do that I get a Uncaught TypeError: Cannot read properties of undefined (reading 'message') error. In fact, it turns out that app.data is undefined.

So how can I do this?

Here's a JS fiddle with this code:

https://jsfiddle.net/dfzun3by/4/

That code is based off of https://v2.vuejs.org/v2/guide/?redirect=true#Declarative-Rendering

As a corollary to this question... in some production code that I'm now responsible for we don't have that - we have something more akin to this in a *.vue file:

export default {
  data() {
    return {
      message: Math.random()
    }
  }
}

I tried to do console.log(app) in the JS console of the page that that corresponds to and got a Uncaught ReferenceError: app is not defined error so how could I do the same thing in the production code?

Upvotes: 0

Views: 2111

Answers (3)

Igor Moraru
Igor Moraru

Reputation: 7729

You can access the root instance from JS console with:

document.getElementById('app').__vue__.message

or

app.$options.data().message

For inspecting vue SFC, it is better to use Vue Devtools.

Upvotes: 2

Connor Dooley
Connor Dooley

Reputation: 389

Sounds like the Vue.js Devtools extension might be beneficial for you, it'll allow you to see the values of all variables that are available to the Vue template (so everything in data).

https://devtools.vuejs.org/guide/installation.html

Upvotes: 1

Eze Kohon
Eze Kohon

Reputation: 325

You can reference that value doing console.log(this.message). If you want to log the value every time it changes, you can create a watcher for the message and include "console.log(this.message)" in there.

  watch: {
   message() {
    console.log(this.message)
   }
  }

Upvotes: -1

Related Questions