javascript - Vue.js 无法很好地显示页面

Question

刷新后我可以看到正确的页面（F5） 我认为渲染标记有问题

• 我从 Json-server 获取位置数据以在地图 api 中绘制标记
• 要获取数据，我使用 axios 和 Async Await 函数 beforeFountain()
• 当我进入一个页面时，我看不到标记
• 刷新此页面后（按 F5），我可以看到标记
• 我试图解决这个问题
  • 更改 axios 获取函数，代码序列

位置数据：

{
   "manholes":[
      {
         "id":0,
         "lat":37.55009275087953,
         "lng":127.05067540273716,
         "type":"point"
      },
      {
         "id":1,
         "lat":37.5501997640179,
         "lng":127.04793121391802,
         "type":"point"
      }
   ]
}

Vue.js 脚本：

data: () => ({
      manholes: [],
    }),
    beforeMount () {
      this.getManholeData()
    },
    mounted () {
      window.kakao && window.kakao.maps
        ? this.initMap()
        : this.addKakaoMapScript()
    },
    methods: {
      // axios get function with async await
      async getManholeData () {
        try {
          const baseURI = 'http://localhost:3000/manholes'
          const response = await this.$axios.get(baseURI)
          this.manholes = response.data
        } catch (ex) {
          console.log(ex)
        }
      },
      initMap () {
         // Map API config
        var container = document.getElementById('map') 
        var options = {
          center: new kakao.maps.LatLng(37.5500792286216, 127.0506923683668), 
          level: 3,
        }
        var map = new kakao.maps.Map(container, options) 

        var imageSrc = require('@/assets/manhole.png') 
        var imageSize = new kakao.maps.Size(32, 32) 
        var imageOption = { offset: new kakao.maps.Point(30, 30) } 

        var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption)

        this.manholes.forEach(function (data) {
          //use position data
          console.log(data.lat)
          console.log(data.lng)
          var marker = new kakao.maps.Marker({
            position: new kakao.maps.LatLng(data.lat, data.lng),
            image: markerImage,
            map: map,
            clickable: true,
          })

          var iwContent = document.createElement('div')
          iwContent.className = 'infowindow'
          // iwContent.setAttribute('style', 'width:165px;text-align:center;padding:5px')
      }

我的问题：

我的目标：

标签： javascripthtmlvue.js