Recently, I started using nuxt and vue-leaflet to create an interactive map, even though I am quite new to it.
This map consists of multiple markers representing different locations. The goal is for the respective page to open when a user clicks on a marker. Currently, a popup opens with the link inside.
<l-marker
v-for="(location, index) in allLocations"
:key="index"
:lat-lng="location.latlng"
>
<l-popup>
<nuxt-link :to="getLink(location)">{{
location.characterName
}}</nuxt-link>
</l-popup>
</l-marker>
However, I would like the link to open directly when the user clicks on the marker, without using a popup. Unfortunately, this code snippet doesn't seem to work:
<nuxt-link
v-for="(location, index) in allLocations"
:key="index"
:to="getLink(location)"
v-slot="{ href, navigate }"
>
<l-marker :lat-lng="location.latlng" :href="href" @click="navigate">
</l-marker>
</nuxt-link>
Any help or suggestions are greatly appreciated! Have a fantastic day :) Chris