vue-leaflet/Vue2Leaflet

Tooltip issue in BeforeDestroy hook

Open

#362 opened on Mar 28, 2019

View on GitHub
 (4 comments) (2 reactions) (0 assignees)JavaScript (380 forks)batch import
bugconfirmedhelp wanted

Repository metrics

Stars
 (1,942 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

Hello Mickaël, you did a great job, but I still have an issue similar to #195.

[Vue warn]: Error in beforeDestroy hook: "TypeError: this._map is null" found in <LTooltip> <LMarker> <LLayerGroup> <LMap>

TypeError: "this._map is null" removeInteractiveTarget leaflet-src.js:6460 closeTooltip leaflet-src.js:10292 unbindTooltip leaflet-src.js:10215 beforeDestroy vue2-leaflet.min.js:1 invokeWithErrorHandling21VueJS

invokeWithErrorHandling callHook destroy destroy invokeDestroyHook invokeDestroyHook patch destroy destroy invokeDestroyHook removeVnodes updateChildren patchVnode patch _update updateComponent get run flushSchedulerQueue nextTick flushCallbacks

I got this error when my data changes or when map is destroyed. I have v-if condition for <l-marker>. The code looks like:

        <l-layer-group
          v-if="stops != null && stops.Fwd !== null"
          layer-type="overlay"
          name="Bus stops"
        >
          <l-marker
            v-for="item in fwdStops"
            :key="item.Key"
            :lat-lng="item.Pos"
            :icon="$iconStopFwd"
          >
            <l-popup>№: {{item.Num}} - {{item.Name}}</l-popup>
            <l-tooltip :options="{permanent: true, interactive: true}">{{item.Num}}</l-tooltip>
          </l-marker>
        </l-layer-group>

I have several maps in my app and all have same bug.

Browsers Affected

  • Chrome
  • Firefox
  • Edge
  • Safari 9
  • Safari 8
  • IE 11

Versions

  • Leaflet: v1.4.0
  • Vue: v2.6.10
  • Vue2Leaflet: v2.0.2

Contributor guide