Below is a simplified example of my issue:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="series in currentSeries" v-bind:data-id="series.id">
The ID is <% series.id %>
<a href="javascript:;" class="removeSeries">X</a>
</li>
</ol>
</div>
</body>
<script>
vueApp = new Vue({
el: '#app',
delimiters: ["<%", "%>"],
data: {
currentSeries: [{id: "1"}, {id: "2"}, {id: "3"}]
},
methods: {
removeSeries: function(id) {
this.currentSeries = this.currentSeries.filter(function(element) {
return element.id != id;
});
}
}
});
$(function() {
$(document).on("click", ".removeSeries", function() {
var id = $(this).parent().data("id");
console.log(id);
vueApp.removeSeries(id);
});
});
</script>
</html>
In the 'currentSeries' variable, I have a list of series displayed as links with an 'X' option to remove them from the list.
The issue arises when clicking on the 'X' button to remove elements. If the first item is removed, it changes its position to be the second one but still displays 'ID 1'. It seems that the data attribute 'data-id' was not updated during rendering. What could be causing this problem and how can I enhance this functionality?