How to access variables in a Vue component from the JS Console?

Question

I have a template like this:

<template>   <div>{{hello}}</div> </template> <script> export default {   data() {     hello: "Hello World!",     secret: "The answer is 42"   } } </script> 

How can I get, and manipulate the value of secret from the Chrome debugging console?

I have installed the Vue extension which allows me to look at my component and see the variables. What I would like to do is to get these variables and manipulate them.

Is this possible?

Answer 1

There is a similar discussion on the Vue.js forum. Specifically, SevenLines post on Mar 25 2018 reads:

Update from 2018. If you use vue-devtools, you can access Vue from console by selecting desired component, and then accessing it through $vm variable. Check the image with example:

Answer 2

I use this

// if result is single element document.getElementById('app').__vue__  // if result is multiple elements document.getElementsByClassName('some-class')[0].__vue__ 

assuming your using id #app for your entry

can also do it in other elements as long as identified as Vue Component element

and get element by tag/id/class