Error in directive sortable bind hook: "Sortable: `el` must be HTMLElement, and not [object Undefined]"

[mesqueeb]

trafficstars

I have this error:

Error in directive sortable bind hook: "Sortable: el must be HTMLElement, and not [object Undefined]"

I use it on a parent element that wraps a v-for on an imported component. Maybe Vue is still initialising? I see that my components are mounted after this error.

[1615450788]

This component does not support vue2.0+

[mesqueeb]

NOW I SEE! Haha! Solves a lot of my troubles. Back to vue 1!

[devsnd]

As a workaround, I just modified the code to work with vue 2.x like this:

        Vue.directive('sortable', {
            inserted: function (el) {
                var sortable = new Sortable(el, options)

                if (this.arg && !this.vm.sortable) {
                    this.vm.sortable = {}
                }

                //  Throw an error if the given ID is not unique
                if (this.arg && this.vm.sortable[this.arg]) {
                    console.warn('[vue-sortable] cannot set already defined sortable id: \'' + this.arg + '\'')
                } else if( this.arg ) {
                    this.vm.sortable[this.arg] = sortable
                }
            },
            bind: function (el, binding) {
                this.options = binding.value || {};
            }
        })

[AlexGnatko]

This will work even better:

var sortable = new Sortable(el, el.options) // in "inserted"

...

el.options = binding.value || {}; // in "bind"

[sonicviz]

How come none of the PR's that look to fix the V2 compatibility issues are not being addressed? Why don't the articles about this like https://sagalbot.github.io/vue-sortable/ clearly state this is not Vue 2.0 compatible?

If people have gone to the trouble of fixing it...

[jishansiddique]

I'm also facing this issue 2.0 if go to 1.0 then it works.