Wie binden Sie eine sortierbare Liste an vuejs?

Question

Ich versuche, eine sortierbare Liste in Vue.js zu binden, aber die zugrunde liegenden Datenliste nicht aktualisiert wird:

Vue.component('lessons', { 
 
    template: "#lessons-template", 
 

 
    data: function() { 
 
    return { 
 
     list: ['Item 1', 'Item 2', 'Item 3'] 
 
    }; 
 
    }, 
 

 
    methods: { 
 
    onChange: function(evt) { 
 
     console.log(this.list); // allways ['Item 1', 'Item 2', 'Item 3'] 
 
    } 
 
    }, 
 

 
    ready: function(value) { 
 
    Sortable.create(this.$els.sortable, { 
 
     draggable: 'li', 
 
     onSort: this.onChange 
 
    }); 
 
    } 
 
}); 
 

 
new Vue({ el: 'body'});

ul { list-style: none;} 
 
ul li { padding: 10px; display: block; background: #EFEFEF; margin-bottom: 5px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script> 
 
<script src="http://rubaxa.github.io/Sortable/Sortable.js"></script> 
 

 
    <div> 
 
    <lessons></lessons> 
 
    </div> 
 

 
    <template id="lessons-template"> 
 

 
    <ul v-el:sortable> 
 
     <li v-for="item in list">{{ item }}</li> 
 
    </ul> 
 
    
 
    <pre>{{ list | json }}</pre> 
 
    </template>

Answer 1

Hier gehen wir:

Vue.js:

Vue.component('lessons', { 
    template: "#lessons-template", 

    data: function() { 
    return { 
     list: ['Item 1', 'Item 2', 'Item 3'] 
    }; 
    }, 

    methods: { 
    onChange: function(evt) { 
     console.log(this.list); // allways ['Item 1', 'Item 2', 'Item 3'] 
    } 
    }, 

    ready: function(value) { 
    var self = this; 
    Sortable.create(this.$els.sortable, { 
     draggable: 'li', 
     onSort: this.onChange, 
     onEnd: function (evt) { 
     self.list.splice(evt.oldIndex,1); 
     self.list.splice(evt.newIndex,0,evt.item.id);  
    }, 
    }); 
    } 
}); 

new Vue({ el: 'body'}); 

HTML:

<div> 
    <lessons></lessons> 
</div> 

<template id="lessons-template"> 
    <ul v-el:sortable> 
    <li v-for="item in list" id="{{item}}">{{ item }}</li> 
    </ul> 
</template> 

Arbeits Vue.js Sortable jsFiddle: https://jsfiddle.net/crabbly/vhsd3wwu/