I am struggling to grasp the concept of props in VueJS and would greatly appreciate some assistance. I want to display a simple google map component on the page and dynamically pass the id element of the div as a prop to the underlying template.
Here is an example:
<div id="app">
<google-map name="map"></google-map>
</div>
And here's how it looks in the Vue file:
<template>
<div :id="mapName"></div>
</template>
<script>
module.exports = {
name: 'google-map',
props: [ 'name' ],
data() {
console.log(this.name); // ERROR: name is undefined
return {
mapName: this.name
};
},
mounted() {
const map = new google.maps.Map(document.getElementById(this.mapName), {
zoom: 14,
center: new google.maps.LatLng(39.305, -76.617)
});
}
}
</script>
<style scoped>
#map {
width: 800px;
height: 600px;
margin: 0 auto;
background: gray;
}
</style>
The issue I'm facing is that this.name is being marked as undefined within the data() method of the component object.