vue3使用draggable拖拽组件
- 一、组件安装
- 二、插件使用
- 三、遇到的问题
- 1. missing required prop： “itemKey”
一、组件安装
yarn add vuedraggable@next
// or
npm i -S vuedraggable@next
二、插件使用
<template>
<draggable
item-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"
