search

hubertokf / vue2-leaflet-draw

MIT License
32 stars 25 forks source link

Cannot read property 'mapObject' of undefined inside App.vue #1

Open sterranova opened 5 years ago

sterranova commented 5 years ago

I am including the vue2leaflet draw toolbar into a NuxtJS project. Leaflet is used via the nuxt-leaflet module:

<div id="map-wrap" style="height: 100vh">
 <no-ssr>
   <l-map :zoom=13 :center="[47.413220, -1.219482]">
     <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
     <l-marker :lat-lng="[47.413220, -1.219482]"></l-marker>
   </l-map>
 </no-ssr>
</div>

The toolbar is imported globally as explained in documentation and used inside the template as:

<div id="map-wrap" style="height: 100vh">
 <no-ssr>
   <l-map :zoom=13 :center="[47.413220, -1.219482]">
     <l-draw-toolbar position="topright"/>
     <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
     <l-marker :lat-lng="[47.413220, -1.219482]"></l-marker>
   </l-map>
 </no-ssr>
</div>

The building phase doesn't complain and it successfully instantiate the map. But the app suddenly shows this error "Cannot read property 'mapObject' of undefined" and the component crashes.

It seams that, when it calls on mounted: const map = _this.$parent.$parent.$refs.map.mapObject;

_this.$parent.$parent.$refs is an empty object

Am I missing something?

hubertokf commented 5 years ago

No, its a bug. It should get mapObject in a smarter way. I'm working on this component right now, if you have a sugestion, be free to make a pull request.

jimmykirk commented 5 years ago

Is that the same thing I'm seeing here?

TypeError: "_this.$parent.$parent.$refs.map is undefined" mounted LDrawToolbar.common.js:1238 VueJS 2 nextTick flushCallbacks vue.runtime.esm.js:1888

thebeekeeper commented 5 years ago

I'm also having that refs undefined error. Tried matching all of the versions in package.json to what I'm seeing for this repo, but still not working. Is there any working example code for this component?

xfischer commented 5 years ago

Hi. I had the same issue, and this could be solved by adding ref="map" to the l-map tag. <l-map ref="map" ... [Edited 2020 dec 14] Important : This might not work anymore, see @garymazz answer below https://github.com/hubertokf/vue2-leaflet-draw/issues/1#issuecomment-744605896

morfair commented 5 years ago

Same error. Fixed with ref="map". It's right?

xfischer commented 5 years ago

@morfair Yes !

garymazz commented 3 years ago

FYI: ref="map" to l-map tag doesn't work as per today. Still the same error from same location: const map = _this.$parent.$parent.$refs.map.mapObject;

I think Vue2Leaflet recommends using findRealParent()

xfischer commented 3 years ago

FYI: ref="map" to l-map tag doesn't work as per today. Still the same error from same location: const map = _this.$parent.$parent.$refs.map.mapObject;

I think Vue2Leaflet recommends using findRealParent()

Thanks for the follow up. Updated my own comment to point here

garymazz commented 3 years ago

If I was better at leaflet, Vuejs and quasar framework, I'd fix it myself and release. I'm just learning them at the same time. Oh yeah, javascript as well.

trevelyanuk commented 3 years ago

@saku-kaarakainen or anyone else - the variant of the "hacky change" that worked for me was the following:

var map = _this.$parent.mapObject;..

With this, I also didn't need to add ref="map"

zeematter commented 2 years ago

@trevelyanuk thanks for the solution. It worked for me.

@Everyone Any permanent solution on this?

mario-oio commented 2 years ago

@saku-kaarakainen thanks, In mi case the row 1238 into , var map = _this.$parent.$parent.$parent.$refs.map.mapObject;

this works for me