Update array order in Vue.js after DOM change

Question

I have a basic Vue.js object:

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>

I also am using a drag and drop library (dragula) to allow users to rearrange the #playlist div.

However, after a user rearranges the playlist using dragula, this change is not reflected in Vue's playlist.entries, only in the DOM.

I have hooked into dragula events to determine the starting index and ending index of the moved element. What is the correct way to go about updating the Vue object to reflect the new order?

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

score 8 · Accepted Answer · answered Feb 06 '16 at 17:51

Vue's v-for does not track modifications to the DOM elements it creates. So, you need to update the model when dragula notifies you of the change. Here's a working 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(', ')
            );
        })
    }
});

score 3 · Answer 2 · answered Jul 01 '16 at 17:56

I created a Vue directive that does exactly this job.

It works exactly as v-for directive and add drag-and-drop capability in sync with underlying viewmodel array:

example

Syntaxe:

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

Example: fiddle1, fiddle2

Github repository: Vue.Dragable.For

Update array order in Vue.js after DOM change

2 Answers2