Pass array data to component and make - vue.js

Question

I try to get familiar with Vue2.
As you can see below I try to pass in the "markers"-Array but the map does not change. How can I change the markers array? How can I make the markers array reactive so that map markers change?
Thanks for helping me!
views/Map.vue
<template>
<div id="MapWrapper">
<Map :markers = "markers"/>
</div>
</template>
<script>
import Map from 'src/components/MapSoal.vue'
export default {
name: 'MapView',
components: {
Map
},
data () {
return {
markers: [
{name: "greenMarker", lngLat: [13.8022177, 51.0069449], color: "green", text: "<h1>This is the green marker</h1>"},
{name: "orangeMarker", lngLat: [13.8022177 - 0.05, 51.0069449], color: "orange", text: "<h1>this is the orange marker</h1>"},
]
}
}
}
</script>
components/MapSoal.vue
<template>
<MglMap
:accessToken="accessToken"
:mapStyle="mapStyle"
:center="center"
:zoom="zoom"
>
<MglMarker v-for="marker in markers" :key="marker.name" :coordinates="marker.lngLat" :color="marker.color">
<MglPopup>
<VCard v-html="marker.text"></VCard>
</MglPopup>
</MglMarker>
<MglGeolocateControl></MglGeolocateControl>
<MglNavigationControl></MglnavigationControl>
</MglMap>
</template>
export default {
data() {
return {
accessToken: 'SOME_API_KEY',
mapStyle: 'mapbox://styles/mapbox/streets-v11?optimize=true',
center: [13.8022177, 51.0069449],
zoom: 9, // starting zoom
markers: []
};
},
}

Answer 1

You're not declaring markers as a prop in your Map component, you're declaring markers in your data object, so the Map component's got a separate data variable named markers, completely unrelated to your parent component's data. Try removing your markers array from data in your Map component and add it in a props object in the component like this:
props: {
markers: {
type: Array
}
},
or
props: ['markers'],
so that your Map component looks like this:
<template>
<MglMap
:accessToken="accessToken"
:mapStyle="mapStyle"
:center="center"
:zoom="zoom"
>
<MglMarker v-for="marker in markers" :key="marker.name" :coordinates="marker.lngLat" :color="marker.color">
<MglPopup>
<VCard v-html="marker.text"></VCard>
</MglPopup>
</MglMarker>
<MglGeolocateControl></MglGeolocateControl>
<MglNavigationControl></MglnavigationControl>
</MglMap>
</template>
export default {
props: ['markers'],
data() {
return {
accessToken: 'SOME_API_KEY',
mapStyle: 'mapbox://styles/mapbox/streets-v11?optimize=true',
center: [13.8022177, 51.0069449],
zoom: 9, // starting zoom
};
},
}