Vue Router not working properly in Leaflet Popup

Question

I am using the vue2-leaflet wrapper in my codebase to get Leaflet and Vue together. Currently, I am having an issue where I am trying to get Vue $router to work inside of Leaflet's popup. This is what my code looks like right now with the attempts that I have made.

<template>
  <l-map>
    <l-tile-layer :url="url" />
    <l-marker
      v-for="point in points"
      :key="point.id"
      :lat-lng="point.latLng"
      :icon="point.icon"
    >
      <l-popup :content="displayInfo(point)"/>
    </l-marker>
  </l-map>
</template>
<script>
...
    displayInfo(point) {
      // how it usually works: this.$router.push({ name: 'point', params: { id: point.id } })
     
      // Attempt 1
      // return '<div onclick="routeToPage(' + point.id + ')">' + point.id + '</div><br/>' + point.subject

      // Attempt 2
      // return '<div @click="routeToPage(' + point.id + ')">' + point.id + '</div><br/>' + point.subject

      // Attempt 3
      // return '<router-link to="{ name: \'point\', params: { id: ' + point.id + ' } }">' + point.id + '</router-link><br/>' + point.subject;

      return point.id + '<br/>' + point.subject;
    },

    routeToPage(id) {
      return this.$router.push({ name: 'point', params: { id }
    }

...
</script>

Attempt 1 Clicking the id in the popup brings up this error.

(index):1 Uncaught ReferenceError: routeToReport is not defined
    at HTMLDivElement.onclick

Attempt 2 Clicking the id does nothing and has no behavior. It looks as if it is just regular text. On inspect it just shows

<div class="leaflet-popup-content" style="width: 301px;">
    <div @click="routeToPage">39105</div><br>
    Aliquid voluptas animi facilis ipsum ducimus doloremque consequatur nemo porro perferendis atque dolorum quo adipisci perferendis magnam
</div>

Attempt 3

<div class="leaflet-popup-content" style="width: 301px;">
    <router-link to="{ name: 'point', params: { id: 39105 } }">39105</router-link><br>
    Aliquid voluptas animi facilis ipsum ducimus doloremque consequatur nemo porro perferendis atque dolorum quo adipisci perferendis magnam
</div>

None of these seem to create a link out of the text at all or even have it register as a route. Any ideas on what I am doing wrong?

Let me know if there is more information you need on my end or if this isn't a clear description of my problem.

score 2 · Accepted Answer · answered Sep 10 '20 at 08:08

2

You should probably put the content of the popup like this :

<l-popup>
  <div @click= ....> </div>
</l-popup>

This way the div with the @click will be interpreted by vue as a template. If you put it in :content, it is just considered as text.

answered Sep 10 '20 at 08:08

Istopopoki

1,584
1
13
20

I did not even think that I could add the content to this via anything other than `:content`. Thank you so much! This was killing me! – Joey Sep 10 '20 at 14:25

Vue Router not working properly in Leaflet Popup

1 Answers1