vue - - - - - vue3使用draggable拖拽组件

一、组件安装

yarn add vuedraggable@next
// or
npm i -S vuedraggable@next

二、插件使用

<template><draggableitem-key="id"class="list-group"v-model="list"@end="draggerEnd()"><template #item="{ element }"><a-tag> {{ element }}</a-tag></template></draggable>
</template>
<script>
import { ref, watch, onMounted, reactive, toRefs } from "vue";
import draggable from "vuedraggable";
export default {name: "DrawerRight",components: { draggable },setup() {const list = ref([1, 2, 3, 4]);const draggerEnd = (v) => {console.log("draggerEnd", v);};return {list,draggerEnd,};},
};
</script> 

三、遇到的问题

1. missing required prop： “itemKey”

解决办法：添加item-key="id"