我正在根据边界框加载标记.它们来自API，通过Piniastore .我把它们放在我的 map 包装器组件map-view的props 栏中.标记是通过VUE-FOR循环呈现的圆圈标记.
当我在 map 上移动时，props 字段根据状态(itemsList)改变，因此圆圈标记的VUE循环重新加载 map 上的标记和新标记.这个效果真的很好.
but一段时间后，我发现，当我点击一个标记时，另一个标记上会打开一个不同于被点击的标记的弹出标记.有时，整个 map 会因此跳转到一个完全不同的位置.
传单中的标记和弹出窗口的顺序是否存在任何已知问题，从而导致此类问题？有人能想象是什么导致了这种行为吗？我错过了什么吗？
以下是我简化的VUE贴图包装组件:
<template>
<div id="main-map-wrapper">
<l-map ref="map" @update:bounds="updateBounds">
<l-circle-marker v-for="(item, index) in itemsList" :key="index">
<l-popup>{{item.name}}</l-popup>
<l-circle-marker>
</l-map>
</div>
</template>
<script>
import { LCircleMarker, LMap, LPopup } from "@vue-leaflet/vue-leaflet"
import {useItemsStore} from "@/store/itemsStore"; //pinia store
export default defineComponent({
name: "mapView",
components: {LCircleMarker, LMap, LPopup},
props: {
itemsList: Object
},
methods: {
updateBounds(bounds) {
useItemsStore.resetToBounds(bounds) //updates the itemsList, which comes from parent
}
}
}
</script>
因此，itemsList是react 性的，来自父组件.
我用的是vue3.