deferredMountedTo is not a function?

[bencooper222]

I'm trying the following code

<v-map :zoom="zoom" :center="center" id="map" >
    <v-tilelayer :url="url" ></v-tilelayer>
    <marker-popup :position="marker" title="Hey"> </marker-popup> 
</v-map>

where marker-popup's template is:

<template>
    <v-marker :lat-lng="position" :title="title" :draggable="false">
      <v-popup :content="text"></v-popup>
    </v-marker>
</template>

I get this error:
[Vue warn]: Error in mounted hook: "TypeError: this.$children[e].deferredMountedTo is not a function.

Is there something special that I have to do to get this to work?

[bencooper222]

I'm pretty convinced this is because my custom component doesn't include a function called deferredMountedTo()... which it should not reasonably be expected to include. The easy workaround for this one is to just use messy code instead of my custom component. That said, this is still a pretty serious flaw.

[KoRiGaN]

Hi @bencooper222,

Yes, at the moment it was not meant to use custom component inside the map.
I think this is the only requirement for a custom component to work properly.

At the moment you have two solutions

• Use messy code,
• Use custom component that define an empty deferredMountedTo method

It would be better to make deferredMountedTo optional. I will try to implement that soon.

[dithyrambe]

Oh, that's nice !
I had the same issue using vue2-leaflet.

Doing so (an empty deferredMountedTo), does the vue2-leaflet component (as Polygon) inside the custom one inherit the mapObject property from the parent (map) of the custom one (mine) ?

Dithyrambe

[KoRiGaN]

Hi @dithyrambe,

No it will not. I will just make the error message go away.

Mickael

[nowakjestem]

I tried to add empty deferredMountedTo method in my custom marker component and as you said, error disappeared, but markers still doesn't render. Any plans on fixing this?

[bencooper222]

He said "I will try to implement it soon".

[KoRiGaN]

Hi @nowakjestem,

Could you please share your example as a JSFiddle so I can investigate it ?

Cheers,

Mickaël

[aleromano92]

I've encountered this problem when using some Vuetify component inside the v-map.

The problem is this:

Inside Map.vue

[KoRiGaN]

Hi @Axel92Dev,

The toolbar is not part of Vue2Leaflet so it doesn't know how/where to add it to the map.
The deferredMountedTo error will be suppressed today in a new release. However, it doesn't mean your example will be working as you want.

Why don't you add it outside the map and make it appear over it like in this example?

I think it's the best way to have it work at the moment.

[KoRiGaN]

Hi @bencooper222, @nowakjestem, @dithyrambe, @Axel92Dev,

Hi @Fillah,

Having custom content like a button or any Vue component inside the popup should now work with release v0.0.57.

Please let me know if it fixes your problem.
Cheers,

Mickaël

[KoRiGaN]

Closing as v0.0.057 should fix this and no comment for a while.