Vue.js
Vue में "this" का उपयोग करना

परिचय

गलत! Vue पद्धति के अंदर कॉलबैक में "इस" का उपयोग करना।

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";
      }, 1000);
    }
  }
})

गलत! एक वादा के अंदर "यह" का उपयोग करना।

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;
    })
  }
})

सही! "यह" पर कब्जा करने के लिए एक बंद का उपयोग करें

आप सही कैप्चर कर सकते हैं this एक का उपयोग कर बंद ।

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/people/", function(data){
      // Inside this call back, because of the closure, self will
      // be accessible and refers to the Vue object.
      self.people = data.results;
    })
  }
})

सही! बाँध का प्रयोग करें।

आप कॉलबैक फ़ंक्शन को बांध सकते हैं ।

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);
  }
})

सावधान! तीर फ़ंक्शंस इक्मास्क्रिप्ट 2015 में पेश किए गए एक सिंटैक्स हैं। यह अभी तक समर्थित नहीं है, लेकिन सभी आधुनिक ब्राउज़र हैं, इसलिए इसका उपयोग केवल तभी करें जब आप उस ब्राउज़र को लक्षित कर रहे हों जिसे आप जानते हैं कि वह इसका समर्थन करता है, या यदि आप अपने जावास्क्रिप्ट को ES5 वाक्यविन्यास के लिए संकलित कर रहे हैं जैसे बेबल ।

गलत! "इस" को संदर्भित करने वाली विधि को परिभाषित करने के लिए एक तीर फ़ंक्शन का उपयोग करना

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"
    }
  }
})

वैकल्पिक रूप से, यदि आप एक जावास्क्रिप्ट कंपाइलर या एक ब्राउज़र का उपयोग कर रहे हैं, जो एक्मास्क्रिप्ट 2015 का समर्थन करता है

new Vue({
  el:"#app",
  data:{
    foo: "bar"
  },
  methods:{
    doSomething(){
      this.foo = "baz"
    }
  }
})