Run VueJs $ clock from browser console not working
I have this main.js
file which loads my Vue app.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
var model = {
a: 1,
name: 'Abdullah'
}
var app = new Vue({
el: '#app',
data: model,
router,
template: '<App/>',
components: {
App
},
watch: {
a: function(val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
}
}
});
app.a = 23; //This triggers the watch function
Inside my instance, I watch for any changes to the data a
.
Any change to a
must run watch
and write to the console. This one watch
works fine when I call it by changing the value a
from a file main.js
for example app.a=23;
, but the same doesn't work when I run it from the browser console.
How can I run watch
from the browser console whenever a
changed?
PS: I just started with VueJS
.
source to share
There are a couple of questions here.
First you have div
to id
on app
. All browsers create HTML elements with the attribute id
available as global variables. So, you have a named global variable app
that points to div
with id
app
.
Second, you write the result new Vue()
to a variable named app
. However, since you are pretty clearly using the build system (because you are using import
) that is app
not available in the global scope, because almost all build systems end up with their compiled javascript in a closure.
The result app
you want to change is not available to you, but it looks like it has to do with the fact that a fully named variable is available in the global scope app
.
If you want to do what you are trying to do, I recommend that you change your script to the following:
window.myApp = new Vue(...)
Then you should be able to go to the console and type
myApp.a = 23
And see the expected results.
source to share