Currently, I'm facing an issue with a filter duplication feature in my code. When I click on the "add filter" button, a duplicated filter is added to the array. However, the problem arises when I try to remove a filter using the cross icon - it always removes the last item from the array instead of the intended one. Below is the code snippet:
<div class="container">
<div class="jumbotron">
<div>
<div class="form-group">
<input type="text" class="form-control input-sm" id="pref-search">
</div>
<div class="form-group">
<button type="button" class="btn btn-default filter-col btn-sm" v-on:click="addFilter">
<i class="fa fa-plus-circle" aria-hidden="true"></i> Add filter
</button>
</div>
</div>
<div v-for="filter in extFilters.filters" style="margin: 10px 0">
<div class="form-group">
<input type="text" class="form-control input-sm" id="pref-search">
</div>
<div class="form-group">
<button type="button" class="btn btn-default filter-col btn-sm" v-on:click="addFilter">
<i class="fa fa-plus-circle" aria-hidden="true"></i> Add filter
</button>
<span v-on:click="removeFilter(filter)"><i class="fa fa-times" aria-hidden="true"></i></span>
</div>
</div>
</div>
</div>
The Vue.js portion of the code is as follows:
var data = {
'filters': [],
}
// Vue app instance
var app = new Vue({
// Initial state of the app
data: {
extFilters: data,
},
// Functions handling data logic
methods: {
addFilter: function() {
this.extFilters.filters.push({
andor: 'a',
search_in: '',
operator: '',
text: ''
})
},
removeFilter: function(filter) {
var index = this.extFilters.filters.indexOf(filter);
this.extFilters.filters.splice(index, 1);
},
},
})
// Initialization
app.$mount('.jumbotron')
The issue arises when attempting to remove a specific filter after adding multiple filters. Instead of removing the intended filter, it always removes the last one. I'm seeking assistance for correcting this issue. You can view the problem on jsFiddle. It would be helpful to have the solution provided on jsFiddle as well.