CODEWITHSUNDEEP
vue.jsleaflet
mthelm85
mthelm85

Reputation: 151

How to add Vue router-link inside of Leaflet marker popup

I'm fetching some information from an API that I then plot on a map. I would like to be able to generate a dynamic <router-link> inside of the popup (instead of using an <a> tag as in the code below). Is this possible?

    const results = await axios.get('https://some-api.herokuapp.com/unique-facilities')
    results.data.results.forEach(result => {
      const marker = L.marker([result._id.lat, result._id.lon], { icon: this.icon }).addTo(this.map)
      marker.bindPopup(`
        <strong>Facility:</strong> ${result._id.facility_name}
        <br />
        <strong>Parent Co:</strong> ${result._id.parent_co ? result._id.parent_co : 'NA'}
        <br />
        <strong>Address:</strong> ${result._id.number} ${result._id.street}
        <br />
        <strong>City:</strong> ${result._id.city}
        <br />
        <strong>State:</strong> ${result._id.state}
        <br />
        <a href='/facility-name/${result._id.facility_name}'>Get details about this facility</a>
      `)
    })

Upvotes: 0

Views: 911

Answers (1)

Abdelaziz Mahmoud
Abdelaziz Mahmoud

Reputation: 60

A Quick Solution:

1) In your main.js file, make sure you have those lines:

import Vue from 'vue';
window.Vue = Vue;
import router from './router.js';
Vue.router = router;

So you can access the router in this way window.Vue.router.

2) Now you can generate a link behaves like the router-link component.

marker.bindPopup(`
    <a
      href="/facility-name/${result._id.facility_name}"
      target="_self"
      onclick="event.preventDefault(); Vue.router.push('/facility-name/${result._id.facility_name}');
    >Get details about this facility</a>
`)

Upvotes: 2

Related Questions