title: Uncaught TypeError: Cannot read property 'removeLayer' of undefined Vue and Leaflet
body: <p>I am making a vue project and I want to use leaflet inside of my components. I got the map showing and I can add markers but I run into an error when I try to add a call a function to delete the marker. I get   </p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'removeLayer' of undefined
    at HTMLInputElement.eval (VM43035 App.vue:118)
    at HTMLInputElement.dispatch (jquery.js:3058)
    at HTMLInputElement.eventHandle (jquery.js:2676) </p>
  </blockquote>
  
  <pre><code>&lt;template&gt;
   &lt;div id="app" class="container-fluid"&gt;
   &lt;div class="row"&gt;
    &lt;div class="col-md-9"&gt;
      &lt;div id="map" class="map" style="height: 781px;"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-3"&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;router-view/&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
  name: "App",
  data() {
  return {
    map: null,
    marker: null,
    mapSW: [0, 4096],
    mapNE: [4096, 0]
   },
  mounted() {
   this.initMap();
   this.initLayers();
   this.onClick();
   this.onPopupOpen();
  },
  computed: {
    popupContent: function() {
      return "&lt;input type='button' value='Delete' class='marker-delete-button' /&gt; &lt;br&gt; &lt;input type='button' value='Add Event' class='marker-delete-button'/&gt;";
  }
   },
   methods: {
    initMap() {
    this.map = L.map("map").setView([0, 0], 1);
    this.tileLayer = L.tileLayer("/static/map/{z}/{x}/{y}.png", {
      maxZoom: 4,
      minZoom: 3,
      continuousWorld: false,
      noWrap: true,
      crs: L.CRS.Simple
    });
    this.tileLayer.addTo(this.map);
    this.map.on("click", this.onClick, this);
  
  
    this.map.setMaxBounds(
      L.LatLngBounds(L.latLng(this.mapSW), L.latLng(this.mapNW))
    );
  },
  initLayers() {},
  onClick(e) {
    this.marker = L.marker(e.latlng, {
      draggable: true
    })
      .addTo(this.map)
      .bindPopup(this.popupContent);
    this.marker.on("click", this.onPopupOpen, this);
  },
  onPopupOpen() {
    $(".marker-delete-button:visible").click(function() {
      this.map.removeLayer(this.marker);
    });
    }
  }
  };
  
  &lt;/script&gt;
  </code></pre>