带有 Vue 2.0 的 Sortable.js 排序不正确

Posted 2023-02-16

【中文标题】带有 Vue 2.0 的 Sortable.js 排序不正确

【英文标题】：Sortable.js with Vue 2.0 sorts incorrectly

【发布时间】：2017-02-13 14:02:13

【问题描述】：

我正在使用 Sortable.js 和 Vue.js。目标是对项目进行排序并保持数据更新。

它在 Vue 1.x 上运行良好，但在更新到 2.0 后排序变得不正确。数组仍然正确更新，但 DOM 中的项目位于错误的位置。

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/

有人可以帮我吗？

【问题讨论】：

恐怕由于虚拟 dom，sortable 现在与 vue 2.0 不兼容。修改 DOM 时，两者似乎都不兼容。我看到的唯一可能的“补丁”是使用 2 个数组，1 个用于绘画，另一个用于跟踪更改

哦。猜猜我必须使用另一个插件:(

【参考方案1】：

我今天也遇到了类似的问题。

添加 :key 值以确保在 Sortable 更改项目顺序后 Vue 以正确的顺序重新呈现元素

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

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

【参考方案2】：

碰巧的是，Sortable 会跟踪 sortable.toArray() 中的顺序，因此很容易进行计算，以按排序顺序为您提供项目，而原始项目列表保持不变。

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) 
      	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"  class="img-responsive">
      </div>
    </div>
    <div v-for="item in sortedItems">
    item
    </div>
  </div>
</template>

【参考方案3】：

确保您没有使用道具，否则您将无法排序。如果您正在使用道具，请将道具数据分配给数据属性并改用数据属性。