Heatmap in vue.js

Question

I am trying to create heatmap in vue.js, I am using vue-google-heatmap for it. The map works fine if I try to hardcode the lat and lng, but when I try to call the lat and lng from db it doesnt work, my code is here:

<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}] 

then i see the points on map but with direct api call it doesnt work. would really appreciate if someone could help me. Thanks.

Answer 1

use v-if="points.length" on parent element

so it will render the map only when you have your values from db.

eg:

<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>