Vue项目使用vue-sortable报错：Sortable: el必须为HTMLElement而非Undefined

架构老林

2026-5-26

解决vue-sortable报错：Sortable: el must be HTMLElement, and not [object Undefined]

我之前在项目里用vue-sortable的时候也碰到过这个一模一样的报错，大概率是指令绑定的元素在执行时还没准备好，或者注册/使用方式有问题，给你几个具体的解决思路：

先确认绑定指令的元素在DOM中存在
这个报错的核心是Sortable找不到要绑定的DOM元素，最常见的场景是你用了v-if来控制<div id="frame_layout">的显示，而指令执行时v-if的条件不满足，元素还没被渲染出来；或者组件渲染时数据是异步加载的，元素还没生成。
对应的解决办法：
- 如果是v-if的问题，换成v-show就行——v-show只是通过CSS隐藏元素，DOM节点始终存在，Sortable能正常找到它；
- 或者手动在元素渲染完成后初始化Sortable，比如在组件的mounted钩子中结合$nextTick：
```
mounted() {
  this.$nextTick(() => {
    const targetEl = document.getElementById('frame_layout')
    if (targetEl) {
      Sortable.create(targetEl, {
        // 这里填你的Sortable配置，比如animation: 150之类的
      })
    }
  })
}
```
检查vue-sortable的注册方式是否正确
不同版本的vue-sortable注册方式可能不一样，如果你是全局注册后还是报错，可以试试在组件内部局部注册指令：
```
// 在你的组件文件里
import { directive as sortableDirective } from 'vue-sortable'

export default {
  directives: {
    sortable: sortableDirective
  }
}
```
另外要注意：v-sortable只能绑定到原生HTML标签（比如<div>、<ul>），不能绑定到自定义Vue组件上，否则也会找不到正确的DOM元素。
排查元素的选择器是否正确
最后再检查下你的<div id="frame_layout">的id有没有拼写错误，页面上有没有重复的id——如果id重复或者拼写错了，document.getElementById也会返回undefined，导致Sortable报错。