Access Vue Instance Using this

Question

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 context I expect it to.

I try with a regular function and get the error above.

What I've tried so far

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

I cannot use the this that I want to in the functions passed to .search and .then . How can I have this bind to my VueJs instance so I can access data, computed, etc...?

I'm not sure about what are you trying to do here, is tmp a data property? Because I think you are trying to assign a value to tmp property but tmp looks like a global var and don't belongs to this. You should try to use let and not var also, because they are local variables. — Pablo Huet Carrasco
– Pablo Huet Carrasco, Commented Apr 8, 2019 at 7:10

Styx · Accepted Answer · 2019-04-08 07:07:56Z

2

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

answered Apr 8, 2019 at 7:07

Styx

10.1k8 gold badges48 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Styx Over a year ago

@Quentin_otd You're welcome. Also, don't forget that client.search() call is asynchronous, so if you want to console.log(tmp) then you should do that in .then() handler.

itsyub · Accepted Answer · 2019-04-08 07:07:45Z

0

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)

    }
}

answered Apr 8, 2019 at 7:07

itsyub

1131 silver badge9 bronze badges

4 Comments

ppovoski Over a year ago

Refrain from using self, it's a synonym for window, although not a reference, a copy. Still, use another word not used by the JavaScript engine. Just in case an imported library is using it.

Potato Salad Over a year ago

I would typically use _this or vm

Quentin_otd Over a year ago

Did not work unfortunatly, console.log(tmp) would always print out "0"

itsyub Over a year ago

@Quentin_otd , please add this console.log('tmp:',self.tmp) line in .then function, it will work.

Collectives™ on Stack Overflow

Access Vue Instance Using this

What I've tried so far

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

What I've tried so far

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related