javascript - matched - vue-router title

Actualizar orden de matriz en Vue.js después del cambio DOM

Question

Tengo un objeto Vue.js básico:

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>

También estoy usando una biblioteca de arrastrar y soltar (dragula) para permitir a los usuarios reorganizar la div #playlist.

Sin embargo, después de que un usuario reorganiza la lista de reproducción utilizando dragula, este cambio no se refleja en las playlist.entries de playlist.entries de Vue, solo en el DOM.

Me he enganchado en eventos de dragula para determinar el índice inicial y el índice final del elemento movido. ¿Cuál es la forma correcta de actualizar el objeto Vue para reflejar el nuevo orden?

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

Answer 1

¿No puedes usar los métodos $ remove y $ set?

Documentación en las listas de Vue.js

Answer 2

El v-for Vue no rastrea las modificaciones a los elementos DOM que crea. Por lo tanto, debe actualizar el modelo cuando dragula le notifique el cambio. Aquí hay un violín que funciona: 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 3

Creé una directiva Vue que hace exactamente este trabajo.

Funciona exactamente como la directiva v-for y agrega la función de arrastrar y soltar en sincronización con la matriz subyacente del modelo de vista:

Sintaxis:

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

Ejemplo: fiddle1 , fiddle2

Repositorio de Github: Vue.Dragable.Para

Answer 4

vue-dragula lo hace de forma automática, y es más fácil de usar. https://github.com/Astray-git/vue-dragula