如何将可排序列表绑定到 vuejs？

Question

我正在尝试在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) {
    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

我们开始吧：

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>

工作 Vue.js 可排序的 jsFiddle：https://jsfiddle.net/crabbly/vhsd3wwu/