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?
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:
$vm0.secret then.
$vm is not defined.
$vm is not defined which I did a few months ago (or perhaps I was using the vite plugin "Vue devtools" instead of the browser extension, I cannot remember). Anyway it's now working, although I seem to have to access data properties via $vm.ctx.someProperty rather than just $vm.someProperty which this answer suggests is possible. Is that the same for you?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
__vue_app__, not __vue__. document.getElementById('app').__vue_app__Here's what I put in the Console, and it immediately modifies the data shown on the page:
myapp = app.__vue__.$children[0]
myapp.hello = 'Bonjour'
myapp.hello = 'Buenos dias'
Mysteriously, if you skip assigning the object to a variable, it doesn't work as intended:
app.__vue__.$children[0].hello = 'Bonjour' // first time it works
app.__vue__.$children[0].hello = 'Buenos dias' // second time it doesn't work
app actually seems to be doing document.getElementById('app') under the hood, and returns an HTML element with an id attribute matching the typed name– in this case, the element you've rooted your Vue instance in.At least with the "vue.global.js" VueJS 3.3.11 build, you can access the Vue instance by doing:
const el = document.getElementById('#myvue');
// replace "#myvue" with the ID of the element you mounted your component using the "mount" method
const secret = el.__vue_app__._instance.proxy.secret;
// if you want to access the "secret" data
el.__vue_app__._instance.proxy is eq to el.__vue__ in VueJS 2.x
app you can also do app._instance.proxy to avoid first selecting the root element of the app.In 2023, Vue 3, to access:
It works with vm0 too, since they are aliases for the last component click on DevTools
$vm0 and $vm are undefined for me. Can you elaborate on "they are aliases for the last component click on DevTools"?in a vue3 app, the following will get you not only the component, but any variables declared in <script setup> (if your component is an SFC):
// get the component in the DOM
const domComponent = document.getElementById("my-component");
// get the vue component instance
const vueComponent = domComponent.__vnode.component;
// get the setup variables
const state = vueComponent.setupState;
.__vnode is undefined. However it does appear to sort of work on child components, but I had to use __vnode.ctx.data instead.
window.vue.mycomponent.data.foo?>. What should I write in the case I want to change the value ofsecret?secretis not a global variable it belongs to aVuecomponent