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钩子将等到上一个钩子完成执行后再等待。

在您的情况下，已挂接的挂钩在创建的挂钩完成之前已经完成，因此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);
            })
    }
}

在脚本中的axios调用后Vue数据变得未定义

2 个答案: