Vue2leaflet: Cannot read property 'mapObject' in Nuxt project.

[vjandrei]

I have done the leaflet import to the Nuxt project like the documentations says.
Everything for fine but when I try to access the API by calling

mounted () {
      this.$nextTick(() => {
        this.map = this.$refs.myMap.mapObject;
        console.log(this.map)
      })
    },`

I get vendor error
TypeError: Cannot read property 'mapObject' of undefined
at VueComponent. (index.js:236)
at Array. (commons.app.js:11439)
at flushCallbacks (commons.app.js:11365)

Here is the the leaflet.js in the plugin folder

import Vue from 'vue';
import { LMap, LTileLayer, LMarker, findRealParent, propsBinder, } from 'vue2-leaflet';
import * as L from "leaflet";
import Vue2LeafletLocatecontrol from 'vue2-leaflet-locatecontrol';

import { Icon } from 'leaflet';
delete Icon.Default.prototype._getIconUrl;

Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
});

Vue.component('l-map', LMap);
Vue.component('l-tile-layer', LTileLayer);
Vue.component('l-marker', LMarker);
Vue.component('v-locatecontrol', Vue2LeafletLocatecontrol);

delete Icon.Default.prototype._getIconUrl;

Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
});


const LeafletPlugin = {
  install(Vue) {
    // Expose Leaflet
    Vue.prototype.$L = L;
  }
};

What I do wrong?

Versions

• Vue2Leaflet: 1.5.1+build.2e3e0ffb

[DonNicoJs]

Try to access the mapObject not in mounted but with the l-map ready event:
https://korigan.github.io/Vue2Leaflet/#/components/l-map/?id=events
That is the safest way :)

Most probably you are using the mounted hook of the component that contains the no-ssr with inside the l-map right?

[vjandrei]

Thanks @DonNicoJs
I got it working also inside methods

 methods: { /* Any app-specific functions go here */ 
        centerUpdated (center) {
            this.center = center;
        },
        boundsUpdated (bounds) {
            this.bounds = bounds;
            console.log(this.$refs.myMap.mapObject.getBounds())
        }
    }

Now it returns the object.

[DonNicoJs]

@vjandrei Can we close the issue so ?

[vjandrei]

@DonNicoJs Yes :) Thanks.

[bravik]

Try to access the mapObject not in mounted but with the l-map ready event:
https://korigan.github.io/Vue2Leaflet/#/components/l-map/?id=events
That is the safest way :)

Most probably you are using the mounted hook of the component that contains the no-ssr with inside the l-map right?

Why not put this in docs example.. spend some time until found this issue

[DonNicoJs]

@bravik PR welcomed :) FAQ section should be the appropriate place

[bravik]

@DonNicoJs https://github.com/vue-leaflet/Vue2Leaflet/pull/581

[DonNicoJs]

@bravik merged!