javascript - Vue Router 在 Leaflet Popup 中无法正常工作
问题描述
我vue2-leaflet
在我的代码库中使用包装器将 Leaflet 和 Vue 放在一起。目前,我遇到了一个问题,我试图让 Vue$router
在 Leaflet 的弹出窗口中工作。这就是我的代码现在与我所做的尝试的样子。
<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>
尝试 1 单击弹出窗口中的 id 会出现此错误。
(index):1 Uncaught ReferenceError: routeToReport is not defined
at HTMLDivElement.onclick
尝试 2 单击 id 什么也不做,也没有任何行为。它看起来好像只是普通文本。检查时它只是显示
<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>
尝试 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>
这些似乎都没有从文本中创建链接,甚至没有将其注册为路线。关于我做错了什么的任何想法?
让我知道您是否需要更多信息,或者这不是对我的问题的清晰描述。
解决方案
您可能应该像这样放置弹出窗口的内容:
<l-popup>
<div @click= ....> </div>
</l-popup>
这样,带有 的 div@click
将被 vue 解释为模板。如果你把它放进去:content
,它只是被认为是文本。
推荐阅读
- javascript - 使用 ng-bind-html 嵌套 ng-repeat
- jquery - 在元素调整大小上切换 css 类会让人感到不安
- google-maps - 距离矩阵 API 返回错误信息
- office-js - Office 对话窗口在 IE11 上无法打开
- python - 如何将本地 PyCharm 连接到服务器上安装的 python?这甚至可能吗?
- sql-server - 此语句中的数字是什么意思: DATEDIFF(wk, 6, '2020-01-03');
- c++ - 如何在 c++17 中传递 Callable 对象以与 std::invoke 一起使用
- mongodb - 根据条件更新多个文档
- python - databricks rest api 奇怪的缺少参数
- php - 如何从 prestashop 中的另一个钩子执行自定义钩子?