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

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"