La variable de données n'est pas mise à jour par la méthode dans VueJS

Question

J'utilise le code suivant pour obtenir le code postal (pin code) des visiteurs à partir de l'API de géolocalisation HTML5. Cependant, je veux obtenir ce code postal et le mettre à jour dans une variable de données 'pincode'. Voici le code que j'ai utilisé, la valeur s'imprime correctement dans la console. Mais pas de mise à jour dans la variable 'pincode'.

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

Answer 1

C'est parce que vous avez perdu le contexte pour this à l'intérieur de votre geocoder.geocode fonction

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

et cela devrait fonctionner.

Answer 2

Au lieu d'utiliser function() vous pouvez utiliser la syntaxe fonction de flèche qui ne lie pas sa propre ce , arguments , super ou nouvelle.cible ., comme suit :

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