Data variable not updating from method in VueJS

Question

I'm using the following code to get visitors zip code(pin code) from HTML5 geolocation API. However, I want to get that zip code and update it to a data variable 'pincode'. Below is the code I used, the value prints in console correctly. But not updating in 'pincode' variable.

export default {
    data(){
        return {
      pincode: 0,
        }
    },
    methods: {
    findPincode(){
      navigator.geolocation.getCurrentPosition(function (position) {
                var geocoder = new google.maps.Geocoder();
                var latLng   = new google.maps.LatLng(
                    position.coords.latitude, position.coords.longitude);
                geocoder.geocode({
                    'latLng': latLng
                }, function (results, status) {
                    for (var i = 0; i < results[0].address_components.length; i++) {
                        var address = results[0].address_components[i];
                        if (address.types[0] == "postal_code") {
                            console.log(address.long_name) // prints 680001
                            this.pincode = Number(address.long_name) // not working
                        }
                    }
                });
            });
        }    
    }
}

I think you should declare pincode in as data: { pincode: 0 },methods : {...} — Sachin Gadagi
– Sachin Gadagi, Commented Feb 2, 2017 at 6:17
@SachinGadagi vuejs documentation recommends to use data properties as data () { return {...properties } } format to prevent access from outside the scope. — Amresh Venugopal
– Amresh Venugopal, Commented Feb 2, 2017 at 6:20

Amresh Venugopal · Accepted Answer · 2017-02-02 06:15:51Z

9

This is because you lost the context to this inside your geocoder.geocode function

let self = this
geocoder.geocode({
   'latLng': latLng
}, function (results, status) {
    for (var i = 0; i < results[0].address_components.length; i++) {
       var address = results[0].address_components[i];
       if (address.types[0] == "postal_code") {
          console.log(address.long_name) // prints 680001
          self.pincode = Number(address.long_name) // not working
       }
   }
});

and that should work.

answered Feb 2, 2017 at 6:15

Amresh Venugopal

9,5895 gold badges41 silver badges52 bronze badges

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

Comments

Saurabh · Accepted Answer · 2017-02-02 06:21:21Z

5

Instead of using function() syntax, you can use arrow function, which does not bind it's own this, arguments, super, or new.target., like following:

geocoder.geocode({
   'latLng': latLng
}, (results, status) => {
    for (var i = 0; i < results[0].address_components.length; i++) {
       var address = results[0].address_components[i];
       if (address.types[0] == "postal_code") {
          console.log(address.long_name) // prints 680001
          this.pincode = Number(address.long_name) // not working
       }
   }
});

answered Feb 2, 2017 at 6:21

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Collectives™ on Stack Overflow

Data variable not updating from method in VueJS

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