Vue3使用vuedraggable插件
程序员文章站
2022-05-17 10:09:39
...
在vue3中使用vuedraggable会报 Cannot read property 'header' of undefined 这个错误
其实我们只要安装最新版的vuedraggable就能解决这个问题
npm i -S [email protected]
然后再引入插件使用即可
<template>
<div>
<draggable
v-model="myArray"
group="people"
@start="drag = true"
@end="drag = false"
item-key="id"
>
<template #item="{element}">
<div>{{ element.name }}</div>
</template>
</draggable>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import draggable from 'vuedraggable'
export default defineComponent({
components: { draggable },
setup () {
const data = reactive({
drag: false,
myArray: [
{ people: 'cn', id: 10, name: '小明' },
{ people: 'cn', id: 20, name: '小红' },
{ people: 'zh', id: 30, name: 'Karen' },
{ people: 'zh', id: 40, name: 'Mary' }
]
})
return { ...toRefs(data) }
}
})
</script>
上一篇: Vue3 Composition API
下一篇: 矩阵旋转90度,180度,270度
推荐阅读
-
Bootstrap标签页(Tab)插件使用方法
-
laydate时间日历插件使用方法详解
-
Eclipse中关于mybatis插件geneartor的使用和遇到的一些问题
-
关于jquery.edbox插件的使用方法
-
MySQL中InnoDB的Memcached插件的使用教程_MySQL
-
在WordPress中安装使用视频播放器插件Hana Flv Player,wordpresshana_PHP教程
-
EasyNVR网页摄像机无插件H5、谷歌Chrome直播方案-Onvif(一)使用Onvif协议进行设备发现以及指定设备信息探测
-
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能_jquery
-
jquery插件lazyload.js延迟加载图片的使用方法
-
jQuery ui插件的使用方法代码实例