Incorporating Leaflet and Vue together in my codebase using the vue2-leaflet wrapper has presented a challenge. Specifically, I am facing difficulties getting Vue $router to function within Leaflet's popup. Below is a snippet of my current code along with the attempts 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 The error displayed upon clicking the id within the popup is as follows.
(index):1 Uncaught ReferenceError: routeToReport is not defined
at HTMLDivElement.onclick
Attempt 2 Clicking the id yields no response or behavior. It appears as normal text without any interaction. Upon inspection, only the following is shown
<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 methods seem to convert the text into a link or recognize it as a route. Any insights on where I might be going wrong?
Please let me know if further details are required from my end or if the issue needs more clarification.