带有Vue 2.0的Sortable.js排序不正确

Question

我正在使用Sortable.js和Vue.js。目标是对项目进行排序并保持数据更新。

它在Vue 1.x上运行良好，但是在更新到2.0之后，排序变得不正确。数组仍然可以正确更新，但是DOM中的项目放置在错误的位置。

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]);

    } 
   }
});

jsFiddle https://jsfiddle.net/4bvtofdd/4/

有人能帮我吗？

Answer 1

我今天也有类似的问题。

添加：key值以确保在Sortable更改项目顺序后，Vue重新按正确顺序重新排列元素

<div v-for="item in items" :key="item.id">
  <!-- content -->
</div>

https://vuejs.org/v2/guide/list.html#key