熱圖在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>