vue-sortable: has this plugin any incompatibility with vue 2.0?

I’m trying to use this plugin with vue 2.0 and I’m always getting the following error ‘Uncaught Sortable: el must be HTMLElement, and not [object Undefined]’

Any help would be most appreciated. Thanks

About this issue

  • Original URL
  • State: open
  • Created 8 years ago
  • Reactions: 15
  • Comments: 16 (1 by maintainers)

Most upvoted comments

Hey guys, the code is so simple, just put this shit into your project and get it work for Vue 2:

import Vue from 'vue'
import Sortable from 'sortablejs'

Vue.directive('sortable', {
  inserted: function (el, binding) {
    new Sortable(el, binding.value || {})
  }
})

Why bother to introduce another lib? Right?

And remember to add keys for your items: https://github.com/vuejs/vue/issues/4085#issuecomment-257673656

Full example by @Ivannnnn

https://jsfiddle.net/1khq32ed/10/

hi there 😃 finally i managed to get sortable working with vue 2: http://codepen.io/kminek/pen/pEdmoo - maybe it will help to upgrade this plugin 😃

@ItsRD I found the solution. I was importing vue-sortable but, as per https://github.com/sagalbot/vue-sortable/issues/10#issuecomment-272709457, only sortablejs should be imported.

Any of you have the following problem? __WEBPACK_IMPORTED_MODULE_1_vue_sortable___default.a is not a constructor

I’m using your library in a project that I’m upgrading to 2.0. I was able to replace the directive with this:

    Vue.directive('sortable', {
      inserted: function (el, binding) {
        var sortable = new Sortable(el, binding.value || {});
      }
    });

You’ll notice that I removed some of the code around saving references to the sortable. As directives no longer have an instance associated with them, I don’t know that it’s possible to restore this functionality. However, I wasn’t using it so it wasn’t a problem.

I haven’t done any testing with 2.0, but I know that directives were changed significantly. Sounds like the last release candidate is out, so I’ll get this updated in the near future.

Can this fix be pushed up to npm?