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

Posted 2023-02-23

【中文标题】在脚本中调用 axios 后，Vue 数据未定义

【英文标题】：Vue data getting undefined after axios call in script

【发布时间】：2019-02-06 00:05:21

【问题描述】：

我正在尝试通过使用 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 对象：（未定义，未定义）”

【参考方案1】：

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

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

【参考方案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);
            )
    

【讨论】：

如果有人遇到“如果前一个挂钩包含异步函数，Vue Hooks 不会等到前一个挂钩完成后自行执行”，请看这个小提琴显示@mannok 确实是对的~jsfiddle.net/h2k8w9mz