我正在使用Sortable.js和Vue.js.目标是对项目进行排序并保持数据更新。
它适用于Vue 1.x,但在更新到2.0排序后变得不正确。数组仍然正确更新,但DOM中的项目位于错误的位置。
$field{"-test"}
的jsfiddle https://jsfiddle.net/4bvtofdd/4/
有人可以帮助我吗?
答案 0 :(得分:4)
今天我遇到了类似的问题。
添加:键值以确保Vue在Sortable更改项目顺序后以正确的顺序重新呈现元素
<div v-for="item in items" :key="item.id">
<!-- content -->
</div>
答案 1 :(得分:3)
实际上,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" alt="" class="img-responsive">
</div>
</div>
<div v-for="item in sortedItems">
{{item}}
</div>
</div>
</template>
答案 2 :(得分:0)
确保您没有使用道具,否则您将无法进行排序。如果您使用道具,请将道具数据分配给数据属性并改为使用数据属性。