Question

当我尝试访问setter方法之外的数据时，它返回null。这是我的代码：

<div id="app">
     {{userLocation.lat}},
     {{userLocation.lng}},
     {{userLocation.acc}},
     {{userLocation.msg}}
     <button v-on:click="accessData">Show direction</button>
 </div>

new Vue({
  el: "#app",
  data: function(){ 
    return{
        userLocation:{
        lat:null,
        lng:null,
        acc:null,
        msg:''
      }
    }

  },
  created(){
    this.saveData();
    this.accessData();
  },

  methods: {

    saveData: function(){
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(this.setPosition,function(){console.log("error")});
        }
    },

    setPosition: function(position){
            this.userLocation.lat=position.coords.latitude;
            this.userLocation.lng=position.coords.longitude;
            this.userLocation.acc=position.coords.accuracy;
            this.userLocation.msg="success";


    },

     accessData: function(){
            //shows null
            console.log(this.userLocation.lat);
    }

  }
})

如果我打电话＆＃34; accessData＆＃34;在里面＆＃34; saveData＆＃34;然后属性显示正确。在模板中或当我点击按钮时也是如此。

似乎当我调用accessData时，变量尚未定义，或者只能在函数范围内访问。如何在不调用saveData的情况下访问userLocation？

这里有完整的例子： https://jsfiddle.net/Bulywyf/0227xyen/

Answer 1

它显示null，因为你的saveData（）函数实际上并没有调用setPosition（）。它只将其作为回调传递，以便稍后调用（例如，在用户接受弹出窗口以允许访问位置数据之后。）

初始化后从方法访问数据 - vuejs

1 个答案: