Vue3 Leaflet组件点击Marker弹出错误Popup问题排查

核心原因：v-for使用index作为key导致的Vue组件复用问题 #

这不是Leaflet本身的已知问题，而是Vue列表渲染的常见误区——你用了index作为v-for的key。当地图边界变化，itemsList更新（比如新增、删除、排序元素）时，Vue会基于index复用现有的LCircleMarker组件实例，而不是为新的item创建全新的组件。

举个例子：原来index=0对应坐标A的Marker，更新后index=0变成了坐标B的item，Vue会把旧组件的props更新为B的数据，但Leaflet底层的Marker实例可能没有完全解绑旧的Popup、清除旧的位置关联，导致点击B的Marker时，弹出的还是A的Popup，甚至地图会跳转到A的位置。

解决方案 #

把v-for的key换成每个item的唯一标识字段（比如每个item自带的id、uuid等），让Vue能精准识别每个item，更新时正确创建/销毁对应的组件，避免实例复用导致的关联混乱。

修改后的模板代码：

<template>
  <div id="main-map-wrapper">
    <l-map ref="map" @update:bounds="updateBounds">
      <!-- 把key从index换成item的唯一标识，比如item.id -->
      <l-circle-marker v-for="(item, index) in itemsList" :key="item.id">
        <l-popup>{{item.name}}</l-popup>
      </l-circle-marker>
    </l-map>
  </div>
</template>

额外注意点 #

1. 修正props类型：你当前props里itemsList定义为Object，但它实际是数组，应该改成Array，避免类型错误影响响应式更新：

props: {
  itemsList: Array
}

2. 确保Pinia更新itemsList时是替换整个数组（比如用state.itemsList = newItems，而不是直接修改原数组的元素），这样Vue的响应式系统才能正确触发组件更新。

内容的提问来源于stack exchange，提问作者helle