I am facing an issue with deleting a nested object based on index and i in Vuejs methods. The current code is not working as expected, as it deletes multiple objects instead of just the one specified. Additionally, sometimes the indexing is incorrect but I haven't been able to identify the cause of this yet. Any help or suggestions on how to fix this buggy code would be greatly appreciated.
Edit: I am using an npm package for searchable multi-select selection lists that only allow objects to be passed to the options attribute.
Below is the script:
export default {
props: {
tag_filters: Object
},
data() {
return {
tagfilters: {
0: {
0: {
code: {
code: 'Thank You Codes'
},
condition: {
condition: 'AND'
}
},
}
}
}
}
computed: {
realTagFilters() {
if (Object.keys(this.tag_filters).length > 0 && typeof Object.keys(this.tag_filters) !== 'undefined') {
return this.tag_filters['filter'];
} else {
return this.tagfilters;
}
}
},
method: {
deleteFilter(index, i){
delete this.realTagFilters[index][i];
for(var property in this.realTagFilters) {
for (var p in this.realTagFilters[property]) {
if(property > index && p > i) {
property -= 1;
this.realTagFilters[property] = this.realTagFilters[property + 1];
delete this.realTagFilters[property + 1];
if(p > i) {
p -= 1;
this.realTagFilters[property][p] = this.realTagFilters[property][p + 1];
delete this.realTagFilters[property][p + 1];
}
}
else if (property == index && p > i) {
p -= 1;
this.realTagFilters[property][p] = this.realTagFilters[property][p + 1];
delete this.realTagFilters[property][p + 1];
}
}
}
if(Object.keys(this.realTagFilters[index]).length == 0) {
delete this.realTagFilters[index];
}
this.$forceUpdate();
},
}
}