最近在使用 Vuejs 来改写网站博客后台,开始实现前后端完全分离的设计。 后台有一个自定义导航菜单的功能,于是 Sortable 来进行导航菜单拖动排序。 但是却遇到了一个很蛋疼的问题,就是数据更新了,但是 Dom没有更新,或者 Dom 更新出来位置始终是不对的,真是百思不得其姐~~~

代码如下:

<template>
    <div class="navigation">
        <div class="grid-content bg-purple-light">
            <div class="drap-list">
                <ul id="draggable">
                    <li v-for="(item,index) in navigations" class="pit-nav-item" :url="item.url"
                        :name="item.name">
                        <span class="drag-handle">&#9776;</span> {{ item.name }}
                        <i class="delete-icon js-remove" @click="removeItem(item)"> x </i>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
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复现图:

bug

当对数据进行拖动的时候,我把第一个 baidu 拖放到了 google的第二列,然后 console 打印出来的内容显示排序的结果已经变了的。 但是 Dom上却很奇葩的没有变化。

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

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