I am currently in the process of developing a small alarm application using Vue.js. My goal is to add an eventListener to buttons with the "del" class that triggers a method and passes over the event. To achieve this, I am utilizing Vue's "mounted" feature:
mounted: function timeInterval () {
var app = this;
var del = document.getElementsByClassName("del");
del.addEventListener('click', function (e) {
app.deleteAlarm(e);
},
}
Within the deleteAlarm method, my objective is to extract the id of the clicked button and perform actions based on it:
deleteAlarm: function (e) {
var app = this;
var id = e.target.id;
app.alarms.splice(id, 1);
}
I've spent considerable time trying to troubleshoot the issue but haven't been successful in resolving it.
Note: The approach I am taking is crucial as the buttons are part of a dynamic list rendered through v-html. Here is the function responsible for adding HTML content to the data variable:
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>";
}
Furthermore, this is how the variable gets displayed utilizing the v-html directive:
<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>