Javascript 未捕获类型错误：无法读取属性'；移除层'；未定义的Vue和传单

我正在制作一个vue项目，我想在我的组件中使用传单。我得到了地图显示，我可以添加标记，但我遇到了一个错误，当我试图添加一个函数调用删除标记。我明白了

未捕获的TypeError:无法读取未定义的属性“removeLayer” 在HTMLInputElement.eval（VM43035 App.vue:118） 在HTMLInputElement.dispatch（jquery.js:3058） 在HTMLInputElement.eventHandle（jquery.js:2676）上

导出默认值{
名称：“应用程序”，
数据（）{
返回{
map:null，
标记：空，
mapSW:[04096]，
mapNE:[4096,0]
},
安装的（）{
this.initMap（）；
这个.initLayers（）；
this.onClick（）；
this.onPopupOpen（）；
},
计算：{
popupContent:function（）{
返回“
”；
}
},
方法：{
initMap（）{
this.map=L.map（“map”）.setView（[0,0]，1）；
this.tillelayer=L.tillelayer（“/static/map/{z}/{x}/{y}.png”{
最大缩放：4，
minZoom:3，
连续世界：错误，
诺拉普：没错，
crs:L.crs.Simple
});
this.tillelayer.addTo（this.map）；
this.map.on（“单击”，this.onClick，this）；
this.map.setMaxBounds(
L.LatLngBounds（L.latLng（this.mapSW），L.latLng（this.mapNW））
);
},
initLayers（）{}，
onClick（e）{
this.marker=L.marker（即latlng{
德拉格布尔：是的
})
.addTo（此.map）
.bindPopup（此.popupContent）；
this.marker.on（“单击”，this.onPopupOpen，this）；
},
onPopupOpen（）{
$（“.marker删除按钮：可见”）。单击（函数（）{
this.map.removeLayer（this.marker）；
});
}
}
};

正如Itamajas指出的，它绑定到DOM元素，而不是您的vue实例

我建议：

onPopupOpen() {
  const map = this.map
  const marker = this.marker
  $(".marker-delete-button:visible").click(function() {
    map.removeLayer(marker);
  });
}

---

在本例中，

此

指向DOM元素，而不是组件。可能的重复我建议在某个时候阅读重复的帖子，但在本例中的快速修复方法是在

onPopupOpen

方法中的

单击

回调中使用箭头函数：

。单击（（）=>{

。在arrow函数中对

此

的引用与父作用域（在您的情况下是Vue实例）相同。这可以正常工作，但会删除我放置的最后一个标记。如何使其删除任何标记？

onPopupOpen() {
  const map = this.map
  const marker = this.marker
  $(".marker-delete-button:visible").click(function() {
    map.removeLayer(marker);
  });
}