Tutorial by Examples

new Vue({ el:"#app", data:{ foo: "bar" }, methods:{ doSomethingAsynchronous(){ setTimeout(function(){ // This is wrong! Inside this function, // "this" refers to the window object. this.foo = "baz"; ...

new Vue({ el:"#star-wars-people", data:{ people: null }, mounted: function(){ $.getJSON("http://swapi.co/api/people/", function(data){ // Again, this is wrong! "this", here, refers to the window. this.people = data.results; }) ...

You can capture the correct this using a closure. new Vue({ el:"#star-wars-people", data:{ people: null }, mounted: function(){ // Before executing the web service call, save this to a local variable var self = this; $.getJSON("http://swapi.co/api/peop...

You can bind the callback function. new Vue({ el:"#star-wars-people", data:{ people: null }, mounted:function(){ $.getJSON("http://swapi.co/api/people/", function(data){ this.people = data.results; }.bind(this)); } })

new Vue({ el:"#star-wars-people", data:{ people: null }, mounted: function(){ $.getJSON("http://swapi.co/api/people/", data => this.people = data.results); } }) Caution! Arrow functions are a syntax introduced in Ecmascript 2015. It is not yet supp...

new Vue({ el:"#app", data:{ foo: "bar" }, methods:{ // This is wrong! Arrow functions capture "this" lexically // and "this" will refer to the window. doSomething: () => this.foo = "baz" } })

new Vue({ el:"#app", data:{ foo: "bar" }, methods:{ doSomething: function(){ this.foo = "baz" } } }) Alternatively, if you are using a javascript compiler or a browser that supports Ecmascript 2015 new Vue({ el:"#app&quo...