Skip to content Skip to sidebar Skip to footer

Access Vue Instance Using This

When I try to use this in my VueJs methods I get the following error this is undefined I think that I shouldn't use arrow functions because their this does not bind to the contex

Solution 1:

You should use arrow function to save this context, and don't forget that inside Vue methods this refers to the current instance.

data() {
  return {
    counter:0,
    connections:2,
    tmp: 0,
  }
},
methods: {
  connection() {
    // ...
    var client = new elasticsearch.Client({
      host: 'xxxxxxxxxxxx'
    });
    client.search({
      [...]
    }).then((resp) => {
      var hits = resp.aggregations;
      this.tmp = hits[1].value;
    }, (err) => {
      console.trace(err.message);
    });
  }
}

Solution 2:

You can assign this variable to local variable(self) and use it in .then function

   data () {
    return {
        counter:0,
        connections:2
    }
},
methods: {
    connection(){
        var self = this;
        var tmp=0
        var elasticsearch = require('elasticsearch');
        var client = new elasticsearch.Client({
        host: 'xxxxxxxxxxxx'
        });
        client.search({
        "index":"400000",
        [...]
        }
        }).then(function (resp) {
            var hits = resp.aggregations;
            self.tmp=hits[1].value;
        }, function (err) {
            console.trace(err.message);
        });   
        console.log("tmp:",tmp)

    }
}

Post a Comment for "Access Vue Instance Using This"