vue3 vuedraggable draggable element must have an item slot

最新推荐文章于 2024-02-23 11:57:27 发布

Roottt_

最新推荐文章于 2024-02-23 11:57:27 发布

阅读量584

点赞数 8

文章标签： vue3 vuedraggable

本文链接：https://blog.csdn.net/weixin_43896125/article/details/135385549

版权

本文介绍了如何在Vue3和Vite项目中使用``结合draggable组件实现可拖动列表，展示了v-model、item-key等关键属性的配置和事件处理方法。

摘要由CSDN通过智能技术生成

在这里插入图片描述
vue3+vite
看官网使用这种<template #item=“{ element }”>

<draggable
  v-model="myArray"
  @start="onStart"
  @end="onEnd"
  :sort="false"
  item-key="id"
  draggable=".item"
  handle=".mover"
>
  <template #item="{ element }">
    <div> {{ element.name }} </div>
  </template>
</draggable>

实战可看这篇

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Roottt_

关注关注

8
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
vue3 vuedraggable draggable element must have an item slot

看官网使用这种<template #item=“{ element }”>
复制链接

扫一扫

vue2升级为vue3 vuedraggable 拖动组件报错

weixin_53898445的博客

02-08

5030

vue2升级为vue3 vuedraggable 拖动组件报错。

由vue2版本升级vue3版本遇到的问题

最新发布

Amelia_Liu的博客

03-22

1713

1、vue3+vuedraggable报错TypeError: Cannot read properties of undefined (reading ‘updated’)：这个一般是因为插件使用语法有问题，vue3版本的插件使用时，v-for不能。2、报错 draggable element must have an item slot：这报错也是因为没有写item插槽，按照上面的语法写了插槽后，这报错就能解决。4. 切记注意，这个单词是不可以修改的,必须是element,不然无法识别(坑大了)

1 条评论您还未登录，请先登录后发表或查看评论

vuedraggable遇到的问题

xinxin_csdn的博客

10-15

1534

原因2、draggable组件必须直接包含v-for: draggable包在ul外层就出现了这个问题。原因：外层的父组件使用了vue-draggable-resizable组件封装的可拖拽的弹框组件。二、拖拽后位置未发生变化：@start、@end事件都执行。原因1、draggble绑定的v-mode和下方列表不一致。一、拖拽无效：触发@start事件，但不执行@end方法。

vuedraggable由vue2版本升级vue3版本遇到的问题

LoveHaixin的博客

12-14

2529

1、vue3+vuedraggable报错TypeError: Cannot read properties of undefined (reading ‘updated’)：这个一般是因为插件使用语法有问题，vue3版本的插件使用时，v-for不能。2、报错 draggable element must have an item slot：这报错也是因为没有写item插槽，按照上面的语法写了插槽后，这报错就能解决。上面示例中div上面的元素已经注释，仍会出错。以上是插件最简几行代码，这四行不能缺失。

vue3 vuedraggable 拖动组件报错

cunning_of_fox的博客

01-27

1494

vue3拖拽组件的使用

vue.draggable.next:基于Sortable.js的Vue 3兼容拖放组件

04-01

vue.draggable.next Vue组件（Vue.js 3.0）允许拖放并与视图模型数组同步。对于Vue 2和Vue 1版本，请检查： : 基于并提供所有功能演示版现场演示特征全面支持功能：支持触摸设备支持拖动手柄和可选文本 ...

vuedraggable+element ui实现页面控件拖拽排序效果

10-17

主要为大家详细介绍了vuedraggable+element ui实现页面控件拖拽排序效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序

06-15

在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在...

Vue 基于 vuedraggable 实现选中、拖拽、排序效果

11-20

vuedraggable 是基于 Sortable.js 的 Vue 适配器，它允许用户轻松地在 Vue 组件之间进行拖放操作，并且能够保持数据模型同步。在本文中，我们将探讨如何利用 vuedraggable 来实现选中、拖拽和排序的效果。首先，...

Vue3 使用 vuedraggable

lhz_333的博客

03-10

2万+

本文主要记录下vuedraggable 在 vue2 和 vue3 中使用上的区别。

vue3.0 + draggable拖拽模块 (解决：Cannot read property ‘header‘ of undefined；以及解决拖拽时不能滚动页面)

weixin_44441196的博客

09-23

6131

Cannot read property ‘header’ of undefined 这个问题是draggable的版本不对，我换为"vuedraggable": "^4.1.0"这个版本就好了安装 npm i vuedraggable@4.1.0 --save 或 yarn add vuedraggable@4.1.0 使用 <template> <div class="drag-box"> <Draggable :list="list" .

【Vue 项目】使用 vuedraggable 实现拖拽效果时遇到的问题及解决方案总结（允许 el-table 行拖拽、部分元素不允许拖拽、拖拽避免影响文字复制和输入框输入文字）

一个努力学习的程序猿

04-11

2万+

在最近的开发过程中，遇到了关于拖拽排序的功能需求。在这里向大家推荐使用 vuedraggable。

vue2+webpack升级vue3+vite，修改插件兼容性bug

关注前端，关注原创

09-08

1389

在前面使用electron+vue3的过程中，已经验证了历史vue2代码+vue3混合开发的模式。本次旧项目vue框架整体升级中，同事已经完成了vue3、pinia、store等基础框架工具的升级。所以我此次记录的主要是vite打包工具升级以及升级后，修改项目中使用到的插件工具兼容性bug。本文章仅作为记录笔记，有类似问题但感觉上面描述不详尽的同学，可评论或私信。

vue3 vuedraggable常用拖拽标签组件+复选功能（组件封装使用）

AC_Surprise的博客

02-23

3745

今天封装（CV即用）了vue3常用的vuedraggable拖拽标签组件+复选功能，介绍了特性、属性、函数配置、事件、插槽、使用六个方面，让开发变得更加高效。

python vuedraggable_vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序

weixin_42522676的博客

01-13

508

vue拖拽克隆clone组件API， vue.draggable实现盒子之间相互拖拽排序克隆(网上资源整理的文档)效果图：--------------------------------------------------------------------------------首先需要安装vuedraggable依赖包：npm install vuedraggable --save因为拖拽组件...

vue3使用tsx使用插槽

qq_48795670的博客

02-19

980

需要注意的是，在 Vue 3 中，使用 TSX 编写组件时，插槽的传递方式略有不同，需要将具名插槽以对象字面量的形式传递给组件的。在 Vue 3 中，使用 TSX 编写组件时，你可以使用对象字面量来定义具名插槽。然而，你需要将这个对象传递给 Vue 组件的。这样就可以在 TSX 中使用具名插槽了。组件就可以使用这个具名插槽了。对象，其中包含了一个名为。对象传递给另一个组件。

Vue——vuedraggable拖拽组件使用文档总结

月来better

04-01

12万+

Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。关于Vue.Draggable详细信息可以查看Github地址特性支持触摸设备支持拖拽和选择文本支持智能滚动支持不同列表之间的拖拽不以jQuery为基础和视图模型同步刷新和vue2的国度动画兼容支持撤销操作当需要完全控制时，可以抛出所有变化可以和现有的UI组件兼容安装 npm install vuedraggable 引入 import draggable from 'vuedraggable'

Vue.Draggable 文档总结

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交