javascript - Vue.js 中的事件监听器

Question

我目前正在使用 Vue.js 构建一个小型警报应用程序。我想在带有“del”类的按钮上有一个 eventListener 来调用方法并移交事件，我正在使用 Vue 的“mounted”功能:

mounted: function timeInterval () {
    var app = this;

    var del = document.getElementsByClassName("del");
    del.addEventListener('click', function (e) {
      app.deleteAlarm(e);
    },
}

在该方法中，我想获取被单击的按钮的 id 并对其执行某些操作:

deleteAlarm: function (e) {
  var app = this;
  var id = e.target.id;
  app.alarms.splice(id, 1);
}

我花了几个小时来找出问题所在，但我无法弄清楚。

编辑:我想要执行此操作的方式很重要，因为按钮是动态列表的一部分，通过 v-html 呈现。这是将 HTML 添加到数据变量的方法:

getAlarmList: function () {
  var app = this;
  app.alarmTable = '';
  for (let i=0; i<app.alarms.length; i++) {
    app.alarmTable += "<tr><td>"+app.alarms[i][0]+"</td><td>"+app.alarms[i][1]+":"+app.alarms[i][2]+":"+app.alarms[i][3]+"</td><td><button type=\"button\" id=\""+i+"\" class=\"btn btn-dark btn-sm del\">Löschen</button></td></tr>";
  }

这就是使用 v-html 指令渲染变量的方式:

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
      <th></th>
    </tr>
  </thead>
  <tbody v-html="alarmTable">

  </tbody>
</table>

Answer 1

我不确定如何使用事件监听器方法，但我认为将 v-for 指令与 vue 模板一起使用将允许您执行您需要的操作。

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Name</th>
      <th>Time</th>
      <th></th>
    </tr>
  </thead>
  <tbody v-html="alarmTable">
    <template v-for="(alarm, index) in alarms">
      <tr>
        <td>{{ alarm[0] }}</td>
        <td>{{ alarm[1] }}:{{ alarm[2] }}:{{ alarm[3] }}</td>
        <td>
          <button
            type="button"
            v-on:click="deleteAlarm(index)"
            class="btn btn-dark btn-sm"
          >
            Löschen
          </button>
        </td>
      </tr>
    <template>
  </tbody>
</table>

然后，您可以修改 deleteAlarm() 函数来删除该行，或从 alarms 数组中删除该项目。