最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Sortable.js with Vue 2.0 sorts incorrectly - Stack Overflow

programmeradmin6浏览0评论

I am using Sortable.js and Vue.js. The goal is to sort items and keep data updated.

It worked well with Vue 1.x, but after update to 2.0 sorting became incorrect. Array still properly updates, but items in DOM are in the wrong places.

new Vue({
  el: '#app',
  template: '#sort',
  data: function() {
    return {
      items: [
        "",
        "",
        "",
        ""
      ],  
    }
  },
  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 /

Can someone help me?

I am using Sortable.js and Vue.js. The goal is to sort items and keep data updated.

It worked well with Vue 1.x, but after update to 2.0 sorting became incorrect. Array still properly updates, but items in DOM are in the wrong places.

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/4bvtofdd/4/

Can someone help me?

Share Improve this question edited Jul 9, 2017 at 20:40 Bert 82.5k17 gold badges203 silver badges166 bronze badges asked Oct 5, 2016 at 8:12 seallasealla 7461 gold badge9 silver badges14 bronze badges 2
  • 1 I'm afraid sortable is not patible right now with vue 2.0 due to the virtual dom. Both seem to be have an inpatibility when the DOM is modified.The only possible "patch" I see is to use 2 arrays, 1 for painting and the other to keep track of changes – ragnar Commented Oct 5, 2016 at 8:52
  • Oh. Guess I have to use another plugin then :( – sealla Commented Oct 5, 2016 at 10:04
Add a ment  | 

3 Answers 3

Reset to default 6

I had a similar problem today.

Add :key value to make sure Vue rerenders elements in correct order after Sortable changes the items order

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

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

As it happens, Sortable keeps track of the order in sortable.toArray(), so it's pretty easy to make a puted that will give you the items in sorted order, while the original item list is unchanged.

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
  },
  puted: {
    sortedItems: function() {
      if (!this.order) {
      	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./ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>
<link href="//maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//unpkg./[email protected]/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>

Make sure you aren't using a prop, or you won't be able to sort. If you are using a prop, assign the prop data to a data attribute and use the data attribute instead.

发布评论

评论列表(0)

  1. 暂无评论