CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Abdullah Mohammad Motiullah
Abdullah Mohammad Motiullah

Reputation: 12592

Triggering VueJs $watch from browser's console not working

I have this main.js file that bootstraps my Vue application.

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 view instance i am watching any changes on data a.

Any change on a should trigger the watch and write to console. This watch works fine when i trigger it by changing the value of a from within the main.js file like so app.a=23; but the same doesn't work when i trigger it from the browsers console.

How can i trigger watch from the browser's console whenever a is changed?

PS: I have just started with VueJS.

Upvotes: 3

Views: 1372

Answers (1)

Bert
Bert

Reputation: 82499

There are a couple issues at play here.

First you have a div with an id of app. All browsers make HTML elements with an id attribute available as global variables. So, you have a global variable called app that points to the div with the id of app.

Second, You capture the result of new Vue() in a variable called app. However, since you are pretty clearly using a build system (because you are using import) that app is not available in the global scope because pretty much all build systems wrap their compiled javascript in a closure.

The result being the app you want to change is not accessible to you, but it looks like it is because there is a completely separate variable called app available to you in the global scope.

If you want to do what you are trying to do, I recommend you change your script to this:

window.myApp = new Vue(...)

Then you will be able to go to your console and type

myApp.a = 23

And see the results you expect.

Upvotes: 4

Related Questions