Currently, I am utilizing Sortable.js and Vue.js in my project. The main objective is to sort items while keeping the data updated.
Previously, everything was functioning smoothly with Vue 1.x. However, upon updating to version 2.0, the sorting started to display inaccuracies. Despite the array being updated correctly, the items in the DOM are now appearing in incorrect positions.
new Vue({
el: '#app',
template: '#sort',
data: function() {
return {
items: [
"http://placehold.it/200X300?text=image1",
"http://placehold.it/200X300?text=image2",
"http://placehold.it/200X300?text=image3",
"http://placehold.it/200X300?text=image4"
],
}
},
mounted: function() {
this.$nextTick(function () {
Sortable.create(document.getElementById('sortable'), {
animation: 200,
onUpdate: this.reorder.bind(this),
});
})
},
methods: {
reorder: function(event) {
var oldIndex = event.oldIndex,
newIndex = event.newIndex;
this.items.splice(newIndex, 0, this.items.splice(oldIndex, 1)[0]);
}
}
});
Here's the link to the code snippet on jsFiddle: https://jsfiddle.net/4bvtofdd/4/
I would greatly appreciate any assistance or insights on how to resolve this issue. Thank you!