Sortierbar.js mit falsch sortiertem Vue 2.0

Question

Ich verwende Sortable.js und Vue.js. Ziel ist es, Artikel zu sortieren und Daten auf dem neuesten Stand zu halten.

Es funktionierte gut mit Vue 1.x, aber nach dem Update auf 2.0 wurde die Sortierung falsch. Das Array wird weiterhin ordnungsgemäß aktualisiert, aber die Objekte im DOM befinden sich an den falschen Stellen.

new Vue({ 
    el: '#app', 
    template: '#sort', 
    data: function() { 
    return { 
     items: [ 
     "http://placehold.it/200X300?text=image1", 
     "http://placehold.it/200X300?text=image2", 
     "http://placehold.it/200X300?text=image3", 
     "http://placehold.it/200X300?text=image4" 
     ], 
    } 
    }, 
    mounted: function() { 
    this.$nextTick(function() { 
     Sortable.create(document.getElementById('sortable'), { 
     animation: 200, 
     onUpdate: this.reorder.bind(this), 
     }); 
    }) 
    }, 
    methods: { 
    reorder: function(event) { 
     var oldIndex = event.oldIndex, 
      newIndex = event.newIndex; 
     this.items.splice(newIndex, 0, this.items.splice(oldIndex, 1)[0]); 

    } 
    } 
}); 

jsFiddle https://jsfiddle.net/4bvtofdd/4/

Kann mir jemand helfen?

Answer 1

Während Sortable die Reihenfolge in sortable.toArray() verfolgt, ist es ziemlich einfach, eine Berechnung zu erstellen, die Ihnen die Elemente in sortierter Reihenfolge gibt, während die ursprüngliche Elementliste unverändert ist.

new Vue({ 
 
    el: '#app', 
 
    template: '#sort', 
 
    data: { 
 
    items: [ 
 
     "http://placehold.it/200X300?text=image1", 
 
     "http://placehold.it/200X300?text=image2", 
 
     "http://placehold.it/200X300?text=image3", 
 
     "http://placehold.it/200X300?text=image4" 
 
    ], 
 
    order: null 
 
    }, 
 
    computed: { 
 
    sortedItems: function() { 
 
     if (!this.order) { 
 
     \t return this.items; 
 
     } 
 
     return this.order.map((i) => this.items[i]); 
 
    } 
 
    }, 
 
    mounted: function() { 
 
    this.$nextTick(() => { 
 
     const sortable = Sortable.create(document.getElementById('sortable'), { 
 
     animation: 200, 
 
     onUpdate:() => { this.order = sortable.toArray(); } 
 
     }); 
 
    }) 
 
    } 
 
});

<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="//unpkg.com/vue@2.0.1/dist/vue.js"></script> 
 
<div id='app'></div> 
 
<template id="sort"> 
 
    <div class="container"> 
 
    <div class="row sort-wrap" id="sortable"> 
 
     <div class="col-xs-6 col-md-3 thumbnail" v-for="(item, index) in items" :data-id="index"> 
 
     <img v-bind:src="item" alt="" class="img-responsive"> 
 
     </div> 
 
    </div> 
 
    <div v-for="item in sortedItems"> 
 
    {{item}} 
 
    </div> 
 
    </div> 
 
</template>

Answer 2

ich heute ähnliches Problem hatte.

Anzahl: Schlüsselwert sicher Vue rerender Elemente in corrent Reihenfolge nach sortierbar Änderung Artikel

bestellen

<div v-for="item in items" :key="item.id"> 
    <!-- content --> 
</div> 

https://vuejs.org/v2/guide/list.html#key

Answer 3

Stellen Sie sicher, Sie sind nicht zu machen eine Stütze verwenden, oder Sie werden nicht sein in der Lage zu sortieren. Wenn Sie eine Requisite verwenden, weisen Sie die Prop-Daten einem Datenattribut zu und verwenden Sie stattdessen das Datenattribut.