Refer to Vue instance from another element instance

Question

I have created a leaflet map with vue.js. I have a method named 'showSubmit, which is to be called at leaflet marker moveend event. This is what I am doing:

this.map.markers.user.on("moveend", function(e) {
    this.showSubmit(e);
});

However, this call is showing error, as 'this' within the function refers to the leaflet map instance and not the vue instance. As a workaround, I have declared a variable, like this:

var $this = this;
this.map.markers.user.on("moveend", function(e) {
        $this.showSubmit(e, $this);
});

Although this works, but I want to avoid this approach. How can I access the vue component from within leaflet map instance?

santanu bera · Accepted Answer · 2018-06-22 07:40:11Z

2

Bind this instance like the following -

this.map.markers.user.on("moveend", function(e) {
  this.showSubmit(e);
}.bind(this));

answered Jun 22, 2018 at 7:40

santanu bera

1,31110 silver badges18 bronze badges

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

Comments

Aldarund · Accepted Answer · 2018-06-22 09:48:22Z

1

If you can use ES6 features, than arrow functions will help, they dont change this.

this.map.markers.user.on("moveend", (e) => {
    this.showSubmit(e);
});

edited Jun 22, 2018 at 9:48

answered Jun 22, 2018 at 8:31

Aldarund

17.6k6 gold badges76 silver badges106 bronze badges

2 Comments

nikoshr Over a year ago

Shouldn't it be .on("moveend", (e) => {...}) ?

Aldarund Over a year ago

@nikoshr oh, sure, u are right :) Thats what u get when dont pay enough attention

Collectives™ on Stack Overflow

Refer to Vue instance from another element instance

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related