如何解决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>
(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>
这样,带有@click
的div将被vue解释为模板。如果将其放在:content
中,它将被视为文本。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。