热图在vue.js中

Question

我正在尝试在vue.js中创建热图，我正在使用vue-google-heatmap。 如果我尝试硬编码lat和lng，地图工作正常，但是当我尝试从db调用lat和lng它不起作用时，我的代码在这里：

<template>
<div class="row">

    <div class="col-sm-12">
        {{this.points}}
        <vue-google-heatmap
                :initial-zoom="10"
                :lat="3.650752"
                :lng="101.793052"
                :points="points"
                :width="600"
                :height="350"/>

    </div>

</div>

  </template>

 <script>

export default {
    data() {
        return {
            points: []
        }
    },
    mounted: function () {

        this.load();
    },

    methods: {
        load() {
            axios.get('/api/user_locations').then((res) => {

                this.points = res.data;

            });
        }
    }
}
 </script>

  this is response from api: [{"lat":3.148197,"lng":101.714899}, 
  {"lat":3.129671,"lng":101.670756}]

 if on data i do this points: [{"lat":3.148197,"lng":101.714899}, 
 {"lat":3.129671,"lng":101.670756}] 

然后我看到地图上的点，但直接api调用它不起作用。 如果有人能帮助我，我真的很感激。 谢谢。

Answer 1

在父元素上使用v-if =“points.length”

所以它只有在你拥有db的值时才会渲染地图。

例如：

<div class="col-sm-12" v-if="points.length">
    <vue-google-heatmap
            :initial-zoom="10"
            :lat="points[0].lat"
            :lng="points[0].lng"
            :points="points"
            :width="600"
            :height="350"/>

</div>