vue-leaflet/Vue2Leaflet

Tooltip issue in BeforeDestroy hook

Open

Aperta il 28 mar 2019

Vedi su GitHub
 (4 commenti) (2 reazioni) (0 assegnatari)JavaScript (1942 star) (380 fork)batch import
bugconfirmedhelp wanted

Descrizione

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

Guida contributor

Tech stack
javascriptvue
Dominio
frontend
Tipo issue
bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
half day
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
stale
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
mostly clear
Prerequisiti
Vue 2 basicsLeaflet basics
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
40
Direzione di ricerca
Investigate the beforeDestroy hook in LTooltip component. The error shows this. map is null when unbindTooltip is called. Check if the map reference is prematurely cleared. Look at similar issue #195 for context. Possibly add a null check before calling removeInteractiveTarget or ensure the map is still available during destruction. Review files like src/components/LTooltip.vue and leaflet src.js for the removeInteractiveTarget method.