sortable vue 排序_遇到了 Vuejs 使用 Sortable 进行排序数据更新了 Dom 没更新

最近在使用 Vuejs 来改写网站博客后台，开始实现前后端完全分离的设计。

后台有一个自定义导航菜单的功能，于是 Sortable 来进行导航菜单拖动排序。

但是却遇到了一个很蛋疼的问题，就是数据更新了，但是 Dom没有更新，或者 Dom 更新出来位置始终是不对的，真是百思不得其姐~~~

代码如下：

• :name="item.name">

  ☰ {{ item.name }}

  x

import Sortable from 'sortablejs';

export default{

data(){

return {

navigations: [

{name: 'google', url: 'https://www.google.com.hk/'},

{name: 'baidu', url: 'https://www.baidu.com/'},

{name: '163', url: 'https://www.163.com/'},

{name: 'taobao', url: 'https://www.taobao.com/'},

{name: 'sina', url: 'https://www.sina.com.cn/'}

]

}

},

methods: {

removeItem: function (item) {

let _this = this;

for (let index in _this.navigations) {

if (_this.navigations[index].name == item.name) {

_this.navigations.splice(index, 1);

}

}

},

sortableDragdrop: function () {

let _this = this;

let from = null;

Sortable.create(document.querySelector('#draggable'), {

handle: '.drag-handle',

animation: 150,

onSort: function (evt) {

},

onEnd: function (evt) {

var navIndex = Object.assign(_this.navigations);

navIndex.splice(evt.newIndex, 0, navIndex.splice(evt.oldIndex, 1)[0]);

_this.navigations = navIndex;

for (let index in _this.navigations){

console.log('index: ' + index + ',name: ' + _this.navigations[index].name);

}

},

});

}

},

mounted() {

this.sortableDragdrop();

}

}

Bug复现图：



当对数据进行拖动的时候，我把第一个 baidu 拖放到了 google的第二列，然后 console 打印出来的内容显示排序的结果已经变了的。

但是 Dom上却很奇葩的没有变化。

Update: 2017年02月18日02:44:35

经过资料搜索，尝试了 Vue.set、Object.assign 都不行，看来我还是需要多去看几遍犀牛书了，唉，暂时找不到方法，先放下吧，如果各位看客知道是什么问题的求分享。