[Vuejs]-Cannot read property '_layerAdd' of undefined (vue + leaflet)

by

0👍

✅

The method addLayer is not part of the public API for the l-map component. Even if it were, the ‘layer’ passed to addLayer needs to be the Vue2Leaflet wrapper component, not the underlying Leaflet layer.

To see this, consider the code in LFeatureGroup.vue:

https://github.com/KoRiGaN/Vue2Leaflet/blob/940e17d8a3b19740a448dedf220d0f7ba9c61d31/src/components/LFeatureGroup.vue#L27

Notice how it calls:

this.parentContainer.addLayer(this);

Here this refers to an instance of the Vue component l-feature-group, whereas the underlying Leaflet FeatureGroup is in the this.mapObject property.

I suggest that you try to use the l-feature-group component instead. Something like:

<l-map
  id="mapid"
  :zoom="zoom"
  :center="center"
>
  <l-feature-group>
    <!-- relevant children -->
  </l-feature-group>
</l-map>

There’s a good example in the documentation:

https://korigan.github.io/Vue2Leaflet/#/components/l-feature-group/

I also strongly recommend that you avoid using document.getElementById("mapid").__vue__ as a way to grab the Vue instance. Use ref and $refs instead.

Leave a comment