I am using Vue 2.0 and I have an error
(Uncaught ReferenceError: vm is not defined)
when i use vm.$data or any other in console to check the properties. I have latest version of vue.js 2.2.4.
As mentioned by #Fiete the vm variable wont be available by default.
You need to define vm globally to access it from the console.
Something like this should work
var vm = new Vue({
el: '#app',
data: {
a: 1
},
router,
template: '<App/>',
components: {
App
}
});
global.vm = vm; //Define your app variable globally
Now you can use vm.$data.PROPERTY or vm.PROPERTY.
The vm variable does not exists by default. And vuejs does not set that variable. If you want to debug your vuejs application I recommend the vuejs Chrome extension.
By opening the extension on your page you can select the component you want to debug. After that you can access the selected component by using the $vm0 variable.
let app = new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
global.vm = app;
in anywhere,
globalThis.vm.$subscribeTo...
vm looks like referring to the Vue instance, then just use this.$set instead of vm.$set. (Worked on a project generated with #vue/cli)
It's really old, but for me the issue was that $vm would become unavailable when I was not focused on the tab / had different tab open. I just had to re-focus on the tab for which the devtools was open and $vm would appear again.
If just re-focusing won't do the trick, sometimes it helps to roam around Vue devtools Components tab until you see $vm written along the component names.
Related
I'm creating a vue.js 2 web app. When some specific global event fires, I want to notify user with some nice dialog. Specifically, I want to notify user, when a new version of service worker is found.
So, in my main.js I have:
reg.addEventListener('updatefound', () => {
//this is where I want to show an info dialog
})
...
//and this is where I start up my Vue app instance
new Vue({el: '#app', render: h => h(App), vuetify, router })
The problem is, how do I tell a Vue component to do something from global scope?
My first suggestion was to define a global vue variable Vue.prototype.$showSwCautionDialog = false and then try to change it somehow from the global scope, but it didnt' work.
I read something about global event bus, but not really sure that that's my case.
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?
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.
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
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)
}
}
In Vue's guide they show that you can change the data of your Vue instance created by new Vue directly from the console. But after going deeper into Vue and growing my application, this approach no longer works. As my new Vue instance no longer has that simple el declaration and a direct data property, but instead is now created with the following code:
new Vue({
router,
render: h => h(App)
}).$mount('#app');
Values that get declared in its data property no longer behave like from their guide. I've tried to change this part of the code into:
var app = new Vue({
data: {
test_var: 'Hello world'
},
router,
render: h => h(App)
});
app.$mount('#app');
But calling app.test_var from console reports undefined. I've also tried calling methods from my Vue.mixin() declarations, but they are undefined as well.
What i want is to expose a method through which i could toggle a property on my main config. My use-case would be when users report that something doesn't work properly, i want to be able to say "Go to the console, and just type in this thing to turn debug on, and then tell me what the console says". So if i could do something like app.debug = true or something like that, you know?
EDIT
It seems the problem is not just exposing the data on the Vue instance, but something deeper than that. I don't understand at which point this distinction started, but for example if i were to change the variable name from var app = new Vue()... to var myApp = new Vue()..., then invoking myApp in the console says undefined. The only reason app is not undefined is because it finds the HTML element with the id="app".
So could it have something to do with the "non-simple" initialisation of Vue where i went from just including the Vue script and writing string templates as in that guide, to now having single-file components that are being compiled into some more advanced stuff that are no longer accessible simply through a javascript variable? The project was created with vue-cli, and i am serving it with npm via npm run serve.
Maybe storing your app in window can solve your problem.
var app = new Vue({
data: {
test_var: 'Hello world'
},
methods: {
method() {
console.log(this.test_var)
}
},
router,
render: h => h(App),
});
app.$mount('#app');
window.app = app
Then in console:
app.method()
you can access the data object with the following syntax :
app.$data.test_var
Or :
switch your data to a function that returns an object :
var app = new Vue({
data() {
return {
test_var: 'Hello world'
}
},
router,
render: h => h(App)
});
app.$mount('#app');
app.test_var // 'Hello world'
I've created a Vue.js app using vue-cli with the webpack-simple template, and it works great. In the provided main.js, I changed the new Vue(... line to var vm = new Vue(..., so that I could access the Vue instance from the Chrome Dev Console, but the variable vm still shows as undefined.
What is the correct way for me to get a reference to the Vue object so that I can do things like manually generating events in components, or manually modifying data from the console?
Try with window.vm = vm;
var vm = new Vue({
el: '#app',
store,
template: '<App/>',
components: { App }
})
window.vm = vm;
And than just type vm in console. Your Vue object will be available now.
Another option is:
Do not modify main.js / main.ts generated by vue-cli
Install Vue.js devtools (available for Firefox and Chrome)
On your Vue-powered website press F12 (open dev console) and go to Vue tab
Every component gets assigned to $vmX variable which you can use in the console.
I am just playing around with vuejs router and try to load a component.
I used the sample code and changed foo
// Define some components
var Foo = Vue.extend({
template: require('./components/test.vue')
});
var Bar = Vue.extend({
template: '<p>This is bar!</p>'
});
// The router needs a root component to render.
// For demo purposes, we will just use an empty one
// because we are using the HTML as the app template.
var App = Vue.extend({})
// Create a router instance.
// You can pass in additional options here, but let's
// keep it simple for now.
var router = new VueRouter()
// Define some routes.
// Each route should map to a component. The "component" can
// either be an actual component constructor created via
// Vue.extend(), or just a component options object.
// We'll talk about nested routes later.
router.map({
'/foo': {
component: Foo
},
'/bar': {
component: Bar
}
})
// Now we can start the app!
// The router will create an instance of App and mount to
// the element matching the selector #app.
router.start(App, '#app')
I also tested it with
Vue.component('Foo', {
template: require('./components/test.vue')
})
In my test.vue i have
<template>
<h2>Test</h2>
</template>
But not as soon as i use require i get everytime the error Required is not defined in my dev tools.
What do i wrong here?
require is a builtin in the NodeJS environment and used in Grunt build environments.
If you also want to use it in a browser environment you can integrate this version of it: http://requirejs.org
(Author) This is outdated:
Use Browserify or Webpack as there is active support in the Vue community
http://vuejs.org/guide/application.html#Deploying_for_Production (dead link)
I personally used this repo of the Vue GitHub-org to get started quickly.
Edit:
This has moved on a bit in early 2018.
Deployment guide: https://v2.vuejs.org/v2/guide/deployment.html
'getting started' type repo: https://github.com/vuejs/vue-loader