使用此访问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)

    }

}