Showing Polygon Map With Dynamic Path On VueJS - google-maps

Question

I got some trouble about implementing google map in vuejs. I was create polygon component like this:
<script>
export default {
name: "MapPolygon",
props: {
google: {
type: Object,
required: true
},
map: {
type: Object,
required: true
},
paths: {
type: Array,
required: true
}
},
mounted() {
const { Polygon } = this.google.maps;
new Polygon({
paths: this.paths,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: this.map,
});
},
render() {}
}
</script>
then when i click some data the polygon can't show on the map. This is my code:
<template>
<map-loader :map-config="mapConfig">
<template slot-scope="{google, map}">
<map-polygon
:google="google"
:map="map"
:paths="zone">
</map-polygon>
</template>
</map-loader>
</template>
<script>
import MapLoader from "../../../components/maps/MapLoader";
import MapPolygon from "../../../components/maps/MapPolygon";
export default {
name: "PolaRuang",
components: {MapPolygon, MapLoader},
data() {
return {
zone: [],
}
},
computed: {
mapConfig() {
return {
...mapSettings
}
},
},
methods: {
getMap(polaRuangId){
this.spinner = true;
axios.post(`/truang/service/pola/showPolaRuang/${polaRuangId}`)
.then(response => {
this.zonaRuang = response.data;
this.spinner = false;
})
.catch(error => {
this.spinner = false;
this.$toasted.global.error(error.response.data);
})
},
}
}
</script>
if i set the zone data static, the polygon show on the map, but when i set dynamic the polygon can't show. Could anyone here to help me to fixing this problem?
Thank You!

Answer 1

The problem was solved
i am adding the watch function for watching the newPath inside the polygon components. So, this is the code :
<script>
export default {
name: "MapPolygon",
props: {
google: {
type: Object,
required: true
},
map: {
type: Object,
required: true
},
paths: {
type: Array,
required: true
}
},
watch: {
async paths (newPaths) {
const { Polygon } = this.google.maps;
let polygon = new Polygon({
paths: newPaths,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35,
});
polygon.setMap(this.map);
}
},
mounted() {
const { Polygon } = this.google.maps;
new Polygon({
paths: this.paths,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: this.map,
});
},
render() {}
}
</script>