javascript - DOM 更改后更新 Vue.js 中的数组顺序

Question

我有一个基本的 Vue.js 对象：

var playlist = new Vue({
    el : '#playlist',
    data : {
        entries : [
            { title : 'Oh No' },
            { title : 'Let it Out' },
            { title : 'That\'s Right' },
            { title : 'Jump on Stage' },
            { title : 'This is the Remix' }
        ]
    }
});

HTML：

<div id="playlist">
    <div v-for="entry in entries">
        {{ entry.title }}
    </div>
</div>

我还使用拖放库（dragula）来允许用户重新排列#playlist div。

但是，在用户使用 dragula 重新排列播放列表后，这种变化不会反映在 Vue 中playlist.entries，只会反映在 DOM 中。

我已经挂钩到 Dragula 事件以确定移动元素的起始索引和结束索引。更新 Vue 对象以反映新顺序的正确方法是什么？

小提琴：https ://jsfiddle.net/cxx77kco/5/

Answer 1

Vuev-for不会跟踪对其创建的 DOM 元素的修改。因此，当 Dragula 通知您更改时，您需要更新模型。这是一个工作小提琴：https ://jsfiddle.net/hsnvweov/

var playlist = new Vue({
    el : '#playlist',
    data : {
        entries : [
            { title : 'Oh No' },
            { title : 'Let it Out' },
            { title : 'That\'s Right' },
            { title : 'Jump on Stage' },
            { title : 'This is the Remix' }
        ]
    },
    ready: function() {
        var self = this;
        var from = null;
        var drake = dragula([document.querySelector('#playlist')]);

        drake.on('drag', function(element, source) {
            var index = [].indexOf.call(element.parentNode.children, element);
            console.log('drag from', index, element, source);
            from = index;
        })

        drake.on('drop', function(element, target, source, sibling) {
            var index = [].indexOf.call(element.parentNode.children, element)
            console.log('drop to', index, element, target, source, sibling);

            self.entries.splice(index, 0, self.entries.splice(from, 1)[0]);

            console.log('Vue thinks order is:', playlist.entries.map(e => e.title ).join(', ')
            );
        })
    }
});

Answer 2

我创建了一个 Vue 指令来完成这项工作。

它与 v-for 指令完全相同，并添加与底层视图模型数组同步的拖放功能：

语法：

<div v-dragable-for="element in list">{{element.name}}</div>

示例：提琴1，提琴2

Github 存储库：Vue.Dragable.For