Question

在加载google maps-api后，我在访问vuejs中的数据对象的值时遇到问题。

数据：

    data() {
    return {
        lat : 0,
        long : 0,
        location: '46.414382,10.013988' 
}
}

我调用的方法。

methods: {

    randomLocation: function(){
        this.lat = Math.random() * (90 + 90) - 90;
        this.long = Math.random() * (180 + 180) - 180;
        this.location = this.lat + ',' + this.long;
        console.log("Random location: ", this.location);

        GoogleMapsLoader.load(
            function(google) {
                var sv = new google.maps.StreetViewService();
                console.log(this.location);
            }
        );
    },

当我调用randomLocation时，控制台将打印错误。它说它无法访问this.location int GoogleMapsLoader.load（...）。为什么会这样，我该如何解决？

Answer 1

因为GoogleMapsLoader.load()在与其外部上下文不同的上下文中运行。

换句话说，它更改了this指向的内容。您可以只缓存对外部this的引用：

randomLocation: function(){
    this.lat = Math.random() * (90 + 90) - 90;
    this.long = Math.random() * (180 + 180) - 180;
    this.location = this.lat + ',' + this.long;
    console.log("Random location: ", this.location);
    let outer_this = this; //<-- here

    GoogleMapsLoader.load(
        function(google)  {
        var sv = new google.maps.StreetViewService();
        console.log(outer_this.location); //<-- here

    });
},

Answer 2

使用arrow function保留上下文：

GoogleMapsLoader.load((google) => {
  var sv = new google.maps.StreetViewService();
  console.log(this.location);
});

Vuejs-加载API时无法读取未定义的属性'location'

2 个答案: