After successfully deleting an item from the database, I am facing an issue where the item is not being removed from the list.
I understand that I should use the
indexto splice the item from the list. However, using theindexmeans I cannot pass theitemIDto the backend, creating a dilemma.
Challenge
- If I use the
index, it sends the index number to the backend, which is incorrect. - If I use the
itemId, the item gets deleted from the database but remains in the list.
Code
HTML
<el-col :span="9" style="margin-top:15px;">
<template v-for="itemm in item.children" >
<div :key="itemm.id">
<!-- child's -->
<el-input :value="itemm.name" placeholder="Please input your variation value" class="input-with-select">
<el-button slot="append" @click="removeSavedChild(itemm.id)" type="danger" icon="el-icon-delete"></el-button>
</el-input>
</div>
</template>
</el-col>
Script
data() {
return {
savedVariations: [],
}
},
methods: {
removeSavedChild(id){
axios.delete('/api/admin/variations/destroy/'+id).then((res) => {
console.log(res.data.success);
this.savedVariations.splice(id, 1);
})
.catch((err) => {
console.log(err)
});
},
}
Any suggestions or solutions?