在 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 对象以反映新订单的正确方法是什么？

Fiddle: https://jsfiddle.net/cxx77kco/5/

Answer 1

Vue 的 v-for 不会跟踪对其创建的 DOM 元素的修改。因此，您需要在 dragula 通知您更改时更新模型。这是一个有效的 fiddle：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>

示例：fiddle1, fiddle2

Github 存储库：Vue.Dragable.For

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

Update array order in Vue.js after DOM change

javascript

vue.js

dragula