vuejs无法获取属性值

Question

<template>
  <div>
      <!--地图容器-->
      <map
          class="myMap"
          id="myMap"
          style="width: 100%; height: 300px;"
          :polyline="polyline"
        :longitude="long"
        :latitude="lat"
         :markers="markers"
          
          scale='16'
          
          show-location
          show-compass
      >
      </map>
 
    
  </div>
</template>

<script>
import QQMapWX from './../../components/qqmap-wx-jssdk.js'
const qqmapsdk = new QQMapWX({
  key:'有key值'
})
export default {
   
  data() {
    return {
    startIcon:'../../../static/all/start.png',
    endIcon:'../../../static/all/start.png',
      long:'',
      lat:'',
        scale: 16,
        markers: [],
    }
  },
  components: {

  },
  onShow(){
    

  },
  methods: {
   initLocation(){
   wx.getLocation({
  type: 'gcj02', // 返回可以用于wx.openLocation的经纬度
  success:(mes) => {
    const the_latitude = mes.latitude
    const the_longitude = mes.longitude
   
     console.log(the_latitude,the_longitude)
  }
})
   },
    formSubmit(){
     let that = this;
    //调用距离计算接口
    qqmapsdk.direction({
      mode: 'driving',//可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
      //from参数不填默认当前地址
      from: {
        latitude: 21.1505300000,
         longitude: 110.3015100000
      },
      to:{
        latitude: 21.2691510000,
        longitude:110.3483540000
      }, 
      
      success: function (res) {
        if(res && res.result){
          console.log(res);
        console.log("路线")
        console.log(res.result.routes)
        let routes = res.result.routes;
        var coors = res.result.routes[0].polyline, pl = [];
        //坐标解压（返回的点串坐标，通过前向差分进行压缩）
        var kr = 1000000;
        for (var i = 2; i < coors.length; i++) {
          coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
        }
        //将解压后的坐标放入点串数组pl中
        for (var i = 0; i < coors.length; i += 2) {
          pl.push({ latitude: coors[i], longitude: coors[i + 1] })
          
        }
        console.log('pl')
        console.log(pl)
        //显示地图
        console.log('that')
        console.log(that)
          console.log(pl[0].latitude)//可显示该坐标
          this.lat=pl[0].latitude,
        this.long=pl[0].longitude,
         this. polyline=[{
            points: pl,
            color: '#FF0000DD',
            width: 4
          }]
          
        
       
        //设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
     
       console.log("thst")
       console.log(that)
        }
        
       
      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
        console.log(res);
      }
    });
  }
  },

  mounted() {
    // formSubmit()
   this.$nextTick(()=>{
     this.formSubmit()
   })
  },
}
</script>

<style>
.myMap{
  width: 100vw;
  height: 80vw
}
.bottomloaction{
    height: 15vh;
    width: 100vw;
    position: absolute;
    bottom: 0px;
}
</style>
下面是wxml的代码
<mapshow-location=""class="_map data-v-2120771a myMap"id="myMap"latitude="0"longitude="0"markers="[]"polyline="[]"scale="16"style="width: 100%; height: 300px;"></map>

也就是无法把lat跟long的值返回到属性中 这是为什么呢

Answer 1

应该用that.lat和that.long来修改vue实例属性吧