0

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?

Improve this question

3 Answers 3

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Both of those work on the jsfiddle demo - thanks! On my prod instance document.getElementById('q-app').__vue__.$options exists (I'm using Quasar on top of Vue.js) but attempting to call .data() after that doesn't work.
1

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

Improve this answer

1 Comment

I'd love to use devtools. Unfortunately, it is not clear to me how to install it. See stackoverflow.com/q/61415909/569976
-1

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)
   }
  }
Improve this answer

3 Comments

That's not helpful. Let's say I have a bunch of buttons that are conditionally enabled. eg. <q-btn @click="doSomething" :disable="!flag1 && !flag2"> <q-btn @click="doSomethingElse" :disable="!flag3 && !flag4">. If the first button is disabled I don't care about flag3 or flag4. Likewise, if the second button isn't working I don't care about flag1 or flag2. I don't want to log every possible combination of variables under the sun because that is simply waaaaay too much info.
but what's that have to do with your original answer? You're referencing your data property the wrong way. console.log(app.data.message) will always be undefined. You need to call console.log(this.message)
You mean my original question. Anyway, console.log(this.message) only works when this is actually defined and it's only ever defined in objects. I think in JS you can add methods to objects after the fact but without knowing Vue internals I wouldn't know how to do that. And maybe it isn't possible to see what a single arbitrary variable is set to in the JS console but if that's the case then maybe that's a reason not to use Vue.js...

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.