Vue - Cannot bind HTML Geo-location to component variable

Question

I'm having this weird issue where when I get the result of a HTML geolocation call, I cant bind it to Vue data, but I can console.log it successfully.

Vue method:

initGeolocation: function() {
            if( navigator.geolocation )
            {
               // Call getCurrentPosition with success and failure callbacks
               navigator.geolocation.getCurrentPosition( success, fail );
            }
            else
            {
               return;
            }

            function success(position)
           {
               console.log(position.coords.latitude); //works
               this.lat = position.coords.latitude; //does not work
           }

           function fail()
           {
              console.log('fail')
           }
        },

  mounted() {
     this.lat = this.initGeolocation(); // does not work
     console.log(this.initGeolocation()) // returns undefined
    },

Data:

        lat: '',
        long: '',

Any help would be very much appreciated.

Have you tried adding the success and fail callbacks directly into the function? Its possible the this keyword is no longer referencing the vue instance and hence this.lat is not accessing the data variable — Varun Agarwal
– Varun Agarwal, Commented Oct 22, 2019 at 6:56

Varun Agarwal · Accepted Answer · 2019-10-22 07:06:58Z

1

The word this refers to the scope of the function. When you nest another function inside, the word this now refers to the new/ smaller scope so this.lat is no longer defined. So we capture the out this in vm and use it inside functions.

methods: {

  initGeolocation: function() {
    var vm = this;
    if( navigator.geolocation)
    {
        // Call getCurrentPosition with success and failure callbacks
        navigator.geolocation.getCurrentPosition( success, fail );
    }
    else
    {
        return;
    }

    function success(position)
    {
        vm.lat = position.coords.latitude; //should work now!!
    }

    function fail()
    {
      console.log('fail')
    }
  }
},
mounted() {
   this.initGeolocation();
},

answered Oct 22, 2019 at 7:06

Varun Agarwal

1,58716 silver badges29 bronze badges

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

Comments

mboldt · Accepted Answer · 2019-10-22 05:34:26Z

In your mounted you assign this.lat with the return of your initGeolocation() method. However this method does not return any data if it succeeds. Instead you write your result into this.lat which then will be overridden again by the void result of your method. So make sure your method initGeolocation either returns your geolocation data or you change your mounted method to call the method without assigning the return value to this.lat.

Also it seems like you just added the initGeolocation method to your component. Look into the methods property of vue components where this would belong.

So try this instead:

mounted() {
  this.initGeolocation(); 
  console.log(this.initGeolocation());
},

methods: {
  initGeolocation: function() {
    if( navigator.geolocation)
    {
        // Call getCurrentPosition with success and failure callbacks
        navigator.geolocation.getCurrentPosition( success, fail );
    }
    else
    {
        return;
    }

    function success(position)
    {
        this.lat = position.coords.latitude; //does not work
    }

    function fail()
    {
      console.log('fail')
    }
  }
}

Collectives™ on Stack Overflow

Vue - Cannot bind HTML Geo-location to component variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related