title: Event Listener in Vue.js
body: <p>I'm currently building a small alarm application with Vue.js. I want to have an eventListener on buttons with a class of "del" that calls a method and hands over the event, I'm using Vue's "mounted" feature for that: </p>
  
  <pre><code>mounted: function timeInterval () {
      var app = this;
  
      var del = document.getElementsByClassName("del");
      del.addEventListener('click', function (e) {
        app.deleteAlarm(e);
      },
  }
  </code></pre>
  
  <p>In that method I want to get the id of the button that was clicked and do something with it:</p>
  
  <pre><code>deleteAlarm: function (e) {
    var app = this;
    var id = e.target.id;
    app.alarms.splice(id, 1);
  }
  </code></pre>
  
  <p>I spent hours on figuring out what's going wrong but I can't get it.</p>
  
  <p><strong>Edit:</strong> The way I want to do this is important, because the buttons are part of a dynamic list, that gets rendered via v-html. This is the method that adds the HTML to the data variable:</p>
  
  <pre><code>getAlarmList: function () {
    var app = this;
    app.alarmTable = '';
    for (let i=0; i&lt;app.alarms.length; i++) {
      app.alarmTable += "&lt;tr&gt;&lt;td&gt;"+app.alarms[i][0]+"&lt;/td&gt;&lt;td&gt;"+app.alarms[i][1]+":"+app.alarms[i][2]+":"+app.alarms[i][3]+"&lt;/td&gt;&lt;td&gt;&lt;button type=\"button\" id=\""+i+"\" class=\"btn btn-dark btn-sm del\"&gt;Löschen&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;";
    }
  </code></pre>
  
  <p>And this is how the variable gets rendered out with the v-html directive:</p>
  
  <pre><code>&lt;table class="table table-striped table-bordered"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Time&lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody v-html="alarmTable"&gt;
  
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>