draggable插件中的 @end="dragEnd"用法更新数据
当使用draggable插件进行拖拽排序时,@end="dragEnd"可以用于更新数据。实现方式是在dragEnd方法中获取拖拽后的排序信息,然后更新数据源。
<template>
<div>
<h3>拖拽排序列表</h3>
<draggable v-model="items" @end="dragEnd">
<div v-for="(item, index) in items" :key="item.id">
{{ item.name }}
</div>
</draggable>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
components: {
draggable,
},
data() {
return {
items: [
{ id: 1, name: "apple" },
{ id: 2, name: "banana" },
{ id: 3, name: "cherry" },
],
};
},
methods: {
dragEnd(event) {
//获取拖拽后数据的排序,更新数据源
const newItems = event.newContainer.children.map((item, index) => {
return { ...item.item, order: index + 1 };
});
this.items = newItems;
},
},
};
</script>
在上面的例子中,我们在dragEnd方法中获取了拖拽后的数据排序,然后重新将数据赋值给items,实现了数据的更新。