set default map centering with props in vue

Question

I'm using vue to make an arc gis driven application, because the map's center can changed based on user location, I am setting the default location to some props then passing them into my map component to be called in the map components mounted() hook for rendering.

I think i'm pretty close to doing this correctly but when I log my props in my map component in the console it says they're undefined.

I'm not sure if my app code is at fault or my child component code?

as you can see in my app.vue I am even trying to pass in plain integers to test the values and they are still undefined.

app.vue

<template>
    <div id="app">
        <web-map v-bind:centerX="-118" v-bind:centerY="34" />

        <div class="center">
          <b-button class="btn-block" @click="getLocation" variant="primary">My Location</b-button>
        </div>
    </div>


</template>

<script>
import WebMap from './components/webmap.vue';

export default {
    name: 'App',
    components: { WebMap }, 
    data(){
      return{
        lat: -118,
        long: 34
      }
    },
};
</script>

webmap.vue

<template>
  <div></div>
</template>

<script>
import { loadModules } from 'esri-loader';

export default {
  name: 'web-map',
  props:['centerX, centerY'],
  data: function(){
    return{
      X: this.centerX,
      Y: this.centerY
    }
  },
  mounted() {
    console.log(this.X,this.Y)

    // lazy load the required ArcGIS API for JavaScript modules and CSS
    loadModules(['esri/Map', 'esri/views/MapView'], { css: true })
    .then(([ArcGISMap, MapView]) => {
      const map = new ArcGISMap({
        basemap: 'topo-vector'
      });

      this.view = new MapView({
        container: this.$el,
        map: map,
        center: [this.X,this.Y],   ///USE PROPS HERE FOR NEW CENTER
        zoom: 8
      });
    });
  },
  beforeDestroy() {
    if (this.view) {
      // destroy the map view
      this.view.container = null;
    }
  }
};

</script>

Answer 1

There is a typo. Change:

props:['centerX, centerY'],

to:

props:['centerX', 'centerY'],