Pushing data to Vue.js data property but new elements do not reactively appear on Google Map [duplicate]
For some reason, I am unable to see google map markers that should be placed based on the objects in my markers array after looping through it. If I were to create a second component and hard code the position, the marker appears. After inspecting the components created using the loop, I realized their position is set to undefined even though I set it to m.position
any idea why?
<template>
<div class="wrapper">
<GmapMap
:center="center"
:zoom="zoom"
:map-type-id="map"
style="width: 100%; height: 850px"
>
<GmapMarker
:key="index"
v-for="(m, index) in markers"
:position="m.position"
:clickable="true"
:draggable="true"
@click="center=m.position"
/>
</GmapMap>
</div>
</template>
<script>
export default {
data: function() {
return {
images: [],
markers: [{lat: 42.150527, lng: 24.746477}, {lat: 42.160527, lng: 24.796477}],
center: {lat: 42.150527, lng: 24.746477},
zoom: 15,
map: 'roadmap'
}
}
}
</script>
After hard coding a GmapMarker using the following code, it does get displayed.
<GmapMarker
:position="{lat: 42.150527, lng: 24.746477}"
:clickable="true"
:draggable="true"
@click="center={lat: 42.150527, lng: 24.746477}"
/>
Within your v-for
loop, m
is the {lat: ..., lng: ...}
object.
These objects do not have a position
property so change
:position="m.position"
@click="center=m.position"
to
:position="m"
@click="center=m"