[Vuejs]-Pass array data to component and make

by

0👍

✅

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
        };
      },    
        
    }

Leave a comment