vue踩坑 Error in mounted hook: "Sortable: `el` must be an HTMLElement, not [object Null]"

最新推荐文章于 2025-06-06 09:19:41 发布
最新推荐文章于 2025-06-06 09:19:41 发布
阅读量1.3w 收藏
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 前端 vue javascript 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TanMengyi/article/details/104821933
本文探讨了在Vue项目中使用v-if控制表格和视图显示时，遇到的Sortable.js拖拽排序功能冲突问题。通过调整Sortable.js的初始化时机，即在el-table加载完成后再调用Sortable.js的方法，成功解决了错误并实现了预期的拖拽排序效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在这里插入图片描述因为项目需要表格实现拖拽排序效果，最开始选用了sortable.js
我的列表视图有两种方式，一种是表格方式的，一种是图示视图。
我用的v-if来控制显示表格和视图的显示方式。
一开始的时候，我默认显示的是表格形式，是没有这个报错的
后来我把初始化的视图改成了图示的，
就报了上图的错…

感觉应该是v-if的原因，el-table这时候是没有加载的，但是我在mounted函数里调用了sortable.js的方法
在这里插入图片描述
所以，只要在el-table表格加载出来了，再使用sortable就不会报错了
在这里插入图片描述
把mounted里的rowDrop()去掉，
改成切换成table视图时才调用rowDrop()就没有报错了

Vue源码分析——第二章
Lee的博客
09-10 617
/* * Object.defineProperty(person,'name',{ configurable:false,//能否使用delete、能否需改属性特性、或能否修改访问器属性、，false为不可重新定义，默认值为true 是否可以编辑 enumerable:false,//对象属性是否可通过for-in循环，flase为不可循环，默认值为true 是否可以枚举遍历 writable:false,//对象属性是否可修改,flase为不可修改，默认值为true value.
Vue 08使用v-model实现计算器
mqingo的博客
01-02 717
08使用v-model实现计算器.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>08使用v-model实现计算器</title> <script type="text/javascript&quot
记录:Sortable: `el` must be an HTMLElement, not [object Null]修改以及拖动组件多table循环添加
weixin_43409573的博客
07-27 1万+
在使用element-ui 2.x以及vue2.x开发管理系统的时候提到了el-table手动拖动排序的需求,所以使用到了sortablejs,在开发过程中出现了Sortable: `el` must be an HTMLElement, not [object Null]的报错,记录一下我的解决方法: 因为项目需求是点击新增按钮弹出el-drawer的页面,然后在其里面的table中做拖动操作 弹出层:红框中为需要拖动的列表 但是我给对应table绑定方法时el-drawer还未弹...
vue使用sortablejs插件的时候报Sortable: `el` must be an HTMLElement
qq_15054679的博客
10-19 1万+
最近因为项目需要很灵活自定义查询，故使用了vue和element-ui组件库，其中el-table需要行和列拖拽排序。故使用到了sortable插件。 报错的排查 首先对： const tbody = document.querySelector(".el-table__body-wrapper tbody"); console.log(tbody) 发现为null,所以就知道肯定el-tabl...
Vue-Draggable-Plus中HTMLElement未定义问题的分析与解决
最新发布
gitblog_07559的博客
06-06 439
Vue-Draggable-Plus中HTMLElement未定义问题的分析与解决 在使用Vue-Draggable-Plus进行拖拽排序开发时，开发者可能会遇到一个典型错误："Uncaught Sortable: el must be an HTMLElement, not [object Undefined]"。这个问题通常伴随着另一个提示："Root eleme...
Element+sorttable实现表格拖拽排序
HTML5_student的博客
10-22 1757
Sortable.js是一款优秀的js拖拽库 官方Demo：http://rubaxa.github.io/Sortable/ sortable.js中文文档https://www.itxst.com/sortablejs/neuinffi.html 安装步骤： npm install sortablejs --save 在.vue中的需要用到sorttable的vue文件中引入，也可以 在main.js中引入注册到Vue的根实例中 import Sortable from 'sortablejs'
vue3:使用sortablejs实现表格拖拽移动
qq_32555123的博客
07-05 2932
vue3表格拖拽 Sortable: must be an HTMLElement, not [object Null]
Sortable前端框架
06-28
scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling. scrollSpeed: 10, // px setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) { data...
Vue 09Vue中使用行内样式---class
mqingo的博客
01-02 2931
09Vue中使用样式---class.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>09Vue中使用样式----class</title> <script type="text/javascript
Vue实现简单聊天对话框案例
Nick.Peng's Blogs
09-12 1万+
功能：实现双人简单聊天对话框，见效果图 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt...
报`Uncaught (in promise)`错误解决办法
热门推荐
weixin_46721670的博客
09-26 6万+
使用了promise,但是在使用的过程中报错误，第一次遇到这种错误，所以在此记录下，方便以后解决问题只要在 new Promise 后面加上，就不会报错了。
Sortable.create 说明
feng_sundy 的专栏
09-16 1万+
Sortable.create用此方法可以初始化一个可排序对象。表达式：Sortable.create(id_of_container,[options]);可选项：Option>DefaultDescriptiontagli设置一个可被Sortable的标签种类（应包含在表达式指定的容器中），在UL或者OL容器中，LI标签是默认值。
HTML DOM HTMLElement Object
SlimApp
07-17 852
HTMLElement ObjectThe following collections, properties, and methods can be used on all HTML elements.HTMLElement CollectionsW3C: W3C Standa
vitepress运行报错：Uncaught (in promise) DOMException: Failed to execute ‘setAttribute‘ on ‘Element‘: ‘a
Lee_01的博客
03-10 696
对文章内容增量删减，确定到问题文本。这个对象导致的报错。前后加反引号，渲染成行内代码。
vue报错Error in mounted hook: “TypeError: Object(...) is not a function“
撒野
09-15 6万+
导入的js要用{}接收 import {shopsratings} from '../../request/api.js'
vue 中报错 Error in mounted hook: "TypeError: handlers[i].call is not a function"
ai鸭丫药努力
08-16 2万+
你会发现出现这个错误了，但是并没有影响到项目的运行，（推下眼镜），作为一个经常假装认真的我，觉得还是解决掉的好，避免为以后留下隐患。 直接看这个错误你会发现，没有任何的头绪，那么就从他给的报错下的提示看看，可能有问题的组件有哪些；看完以后你会发现，这些都和生命周期钩子函数有关系，然后查看你的页面相关  生命周期钩子函数 是否有 声明了未定义方法 或是 只声名了钩子函数。 把钩子删除，或是把你定...
Vue3表格拖拽排序新实践：使用element-plus和Sortable.js
### Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序知识点详解 #### 一、项目概述 本项目是一个基于Vue3框架，利用element-plus UI组件库以及Sortable.js库，实现的表格拖动排序功能。其主要目标...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值