使用此访问Vue实例

Question

当我尝试在VueJs方法中使用此方法时，出现以下错误

这是未定义的

我认为我不应该使用箭头函数，因为它们this没有绑定到我期望的上下文中。

我尝试使用常规函数，并得到上面的错误。

到目前为止我尝试过的

methods: {

  connection(){

    new elasticsearch.Client({...});

    

    client.search({...})

          .then(function (resp) {

            var hits = resp.aggregations;

            this.tmp = hits[1].value;

          }, function (err) {

            console.trace(err.message);

          });                   

   }

}

我无法this在传递给.search和的函数中使用想要的.then。怎样才可以有this绑定到我的VueJs实例，这样就可以访问data，computed等等...？

Answer 1

您应该使用箭头功能保存this上下文，并且不要忘记Vue内部的方法this引用了当前实例。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);    });  }}

Answer 2

您可以将this变量分配给局部变量（self）并在.then函数中使用   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)    }}