I tried to delete an array part.
delete my_array[index];
my_array.splice(index, 1);
When looking at the array it looks fine in both cases in the console.log but the first one crashed my app.
I'm not sure if Vue that I'm using are treating these differently
Why does the last one work, but not the first?
Using the delete operator doesn't affect the length of the array, since it results in setting the element at this index as undefined.
new Vue({
data() { return { array: [1,2,3] } },
created() { delete this.array[1]; console.log(this.array[1]); }
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
delete doesn't set the value of deleted index to undefined, instead the index is removed, causing empty slots occurring into the array.Based on MDN documentation, The JavaScript delete operator removes a property from an object. Same page section Deleting array elements suggesting to use splice as you used in your 2nd case.
Alternatively delete array element
const arr = ['a', 'b', 'c'];
const deleteByIndex = (arr, index) => arr.filter((_, i) => i !== index);
console.log(deleteByIndex(arr, 1))
This has to do with how change detection works in Vue. At object creation getters and setters are created for each property. As soon as you update it the change will be detected.
Directly adding or deleting goes past this system and will break your app.
This is described in more detail here: https://v2.vuejs.org/v2/guide/reactivity.html
splice- which comes from the fact thatdeleteis really defined in general for objects and has no special behavior for arraysdeletedoesn't reindex the array it was used on, it leaves you with a sparse array, where assplicereindexes the array if needed.