Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mesqueeb opened this issue Mar 20, 2018 · 6 comments

Comments

@mesqueeb
Copy link

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
Copy link

This component does not support vue2.0+

@mesqueeb
Copy link
Author

mesqueeb commented Apr 2, 2018

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

@devsnd
Copy link

devsnd commented Jan 4, 2019

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
Copy link

AlexGnatko commented Feb 5, 2019

This will work even better:


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

...

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

@sonicviz
Copy link

sonicviz commented Sep 22, 2019

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants