javascript - 如何使用传单标记作为 nuxt-link?

标签 javascript vue.js leaflet vue-router nuxt.js

我开始使用 nuxt 和 vue-leaflet 来制作交互式 map ,而且我对它很陌生。

map 包含不同位置的多个标记。 当用户单击标记时,应打开相应的页面。 当前会打开一个包含链接的弹出窗口。

      <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>

但我不想使用弹出窗口和链接,我希望当用户单击标记时打开链接。 遗憾的是这段代码不起作用:

      <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>

感谢您的帮助,祝您有美好的一天:) 克里斯

最佳答案

如果将 @click 方法直接绑定(bind)到 l 标记并从绑定(bind)方法打开链接会怎样?

关于javascript - 如何使用传单标记作为 nuxt-link?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60489682/

相关文章:

javascript - JQuery 电话号码验证

javascript - 在父级上打开 Vue 对话框(模态)

javascript - nuxt-links 导航到带有哈希/ anchor 的页面的问题

javascript - Javascript 中的窗口 ['Map' 是什么意思

javascript - 传单删除特定标记

javascript - 传单:检查对象是路径还是标记

javascript - 如何在指令链接中获取我绑定(bind)到模板的范围

javascript - 如何让 react Electron 忽略未定义的错误?

javascript - 使用 Handsontable 在同一列中对纯文本和 html 进行排序问题

带空格的 Javascript 对象键