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: /

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/cxx77kco/5/

• javascript
• vue.js
• dragula

2 Answers 2

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/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(', ')
            );
        })
    }
});

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:

Syntaxe:

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

Example: fiddle1, fiddle2

Github repository: Vue.Dragable.For