Datenvariable, die nicht von der Methode in VueJS aktualisiert wird

Question

Ich verwende den folgenden Code, um die Postleitzahl der Besucher (PIN-Code) aus der HTML5-Geolocation-API zu ermitteln. Allerdings möchte ich diese Postleitzahl erhalten und sie auf eine Datenvariable "PIN-Code" aktualisieren. Unten ist der Code, den ich verwendet habe, der Wert wird korrekt in der Konsole ausgegeben. Aber nicht in 'pincode' Variable aktualisieren. Diese

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

ist, weil Sie den Kontext zu this in Ihrem geocoder.geocode Funktion verloren

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

und das sollte funktionieren.

Answer 2

Statt function() Syntax verwenden, können Sie arrow function verwenden, die nicht bindet seine eigene this, arguments, super oder new.target, wie folgt:.

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