在脚本中调用 axios 后，Vue 数据未定义

Question

我正在尝试通过使用 axios 的 api 在我的传单地图上渲染标记。在我的 axios 调用中，我正在获取数据并且如果我在我的渲染模板中 {{ data }}，数据就会显示。问题是当尝试在同一个脚本中使用数据时，就在 axios 调用从数据中渲染标记之后。在 axios 调用后尝试使用数据时，我得到 undefined。

export default {
      type: Array,
      data () {
        return {
          post: [],
        }
      }, 
      created () {
        axios.get("")
          .then((response)  =>  {
          // console.log(response.data.resource)
          this.post = response.data.resource;
          // console.log([this.post.lat])
        }).catch(error => {
          console.log(error.message);
        })
      },
      mounted () {
        var mymap = L.map(this.$refs['mapElement']).setView([40.783058, -73.971252], 12);
        var myIcon = L.icon({
          iconUrl: redMarker,
          iconSize: [38, 95],
          iconAnchor: [22, 94],
          popupAnchor: [-3, -76],
        })
        var myIcon2 = L.icon({
          iconUrl: greenMarker,
          iconSize: [38, 95],
          iconAnchor: [22, 94],
          popupAnchor: [-3, -76],

        })
        var marker = L.marker([40.783058, -73.971252], {icon: myIcon}).addTo(mymap);
          // console.log([this.post[0].lat])
        var marker2 = L.marker([this.post.lat, this.post.lng], {icon: myIcon2}).addTo(mymap);

[Vue 警告]：挂载钩子错误：“错误：无效的 LatLng 对象：（未定义，未定义）”

Answer 1

很难确切地说出问题所在，但我会删除标记并在 lat 更改时重新添加它，这样您就可以重新渲染应该解决问题的标记：

watch: {
    'post.lat': (newLat, oldLat) => {
        //we should destroy the marker here and regenerate it.
    }
}

Answer 2

axios.get 是一个异步函数。如果前一个钩子包含异步函数，Vue Hooks 不会等到前一个钩子完成后自行执行。

在您的情况下，挂载的钩子在创建的钩子完成之前完成，所以this.post 仍然是一个空数组。

为了一个好的做法，您需要将map 实例存储在数据中，并在axios.get 回调中向地图添加标记。下面是一些示例代码。

export default {
    type: Array,
    data() {
        return {
            mymap: null,
            post: []
        }
    },
    created() {},
    mounted() {
        this.mymap = L.map(this.$refs['mapElement']).setView([40.783058, -73.971252], 12);
        var myIcon = L.icon({
            iconUrl: redMarker,
            iconSize: [38, 95],
            iconAnchor: [22, 94],
            popupAnchor: [-3, -76],
        })
        var myIcon2 = L.icon({
            iconUrl: greenMarker,
            iconSize: [38, 95],
            iconAnchor: [22, 94],
            popupAnchor: [-3, -76],

        })
        var marker = L.marker([40.783058, -73.971252], { icon: myIcon }).addTo(mymap);
        // console.log([this.post[0].lat])

        axios.get("")
            .then((response) => {
                // console.log(response.data.resource)
                this.post = response.data.resource;
                var marker2 = L.marker([this.post.lat, this.post.lng], { icon: myIcon2 }).addTo(this.mymap);
                // console.log([this.post.lat])
            }).catch(error => {
                console.log(error.message);
            })
    }
}