Attempting to shift a specific item in an array, located at position x, to position
2</code. Although the code below successfully accomplishes this task of relocating the item, Vue fails to update the <code>DOMThis is the snippet of code being utilized:
export default class LayersPanel extends Vue {
@ProvideReactive() public layers: any[] = [
{ name: 'Layer 1' }, { name: 'Layer 2' }, { name: 'Layer 3' }, { name: 'Layer 4' }
]
public onDragDrop(evt: DragEvent) {
let offset = parseInt(evt.dataTransfer.getData('text/plain'))
this.layers.splice(2, 0, this.layers.splice(offset, 1)[0])
}
}
<template>
<div class="layers-panel" @dragover="onDragOver" @drop="onDragDrop">
<layer v-for="(layer, index) in layers" :key="index" :info="layer" :offset="index"></layer>
</div>
</template>
There is uncertainty if this issue relates to this note in the documentation:
When you modify an Array by directly setting an index (e.g. arr[0] = val) or modifying its length property. Similarly, Vue.js cannot pickup these changes. Always modify arrays by using an Array instance method, or replacing it entirely. Vue provides a convenience method arr.$set(index, value) which is syntax sugar for arr.splice(index, 1, value).
Despite .splice() being a mutation method, the presence of this shouldn't be a concern. What could potentially be the mistake in implementation here?