vue.js - Vue.js点击组件多次触发

Question

我正在使用vue-azure-maps在地图上显示多边形，并且在图层上使用@click事件时遇到问题。这是我的模板，它显示名为cabstand的多边形：

<div :key="'cabstand-' + cabstand.properties.id" v-for="cabstand in cabstands">
  <AzureMapPolygonLayer :key="'cabstandLayer-' + cabstand.properties.id" :options="{
    fillColor: 'rgba(178, 34, 34, 0.1)',
    fillOpacity: 0.1
  }" @click="clickCabstand($event, cabstand.properties)" />
  <AzureMapPolygon :coordinates="getCabstandCoordinates(cabstand)" />
</div>

还有我的@click函数（仅用于调试）：

clickCabstand(e, cabstand) {
  console.log(e)
  console.log(cabstand)
}

当我点击一个多边形时，它会触发我在地图上拥有的每个多边形的点击，但我想触发我点击的唯一多边形的点击。我已经尝试将@click函数放在<AzureMapPolygon>组件上，但什么也没发生（可能是因为图层在多边形前面？）

谢谢，

标签： vue.jsazure-maps