Update for Vue 2

[MunGell]

Hi Jeff,

I've taken the liberty of updating your code to work with Vue v2. This PR is basically an opinionated version of #13 with fixed tests and dependencies.

I wouldn't expect this to be merged, but may be it will be useful for you when you will be updating this module to v2.

[irelandpaul]

I pulled this request and it seems to be working on Vue 2. Nice work @MunGell

[d13r]

Thanks for this @MunGell, it works well.

To get it working correctly I also had to add v-bind:key to my template:

<tr v-for="(action, index) in actions" v-bind:key="action.id">
    ...
</tr>

Otherwise Vue isn't aware of the HTML change and it gets out of sync with the model.

It is mentioned in the Vue 2 docs, but took me a while to find it, so it may be helpful to add it to the Vue Sortable docs / examples too.

[kartsims]

Works great for me too, will use your version until this PR is merged, thanks @MunGell :raised_hands:

[crabmusket]

Easy mode - add this to package.json:

    "vue-sortable": "git://github.com/MunGell/vue-sortable#77c26994",

[wlx200510]

It works well , I advice you add the v-bind need for arr sort sync, which is better for using.

[rap2hpoutre]

Is there a reason why it should not be merged?

[suth]

Thanks @MunGell, only issue I've seen is that the Sortable instance is no longer available on the VM

[MunGell]

@suth yes, there is no vm variable in vue.js v2. I didn't find a way to keep this variable accessible, if you have any suggestions - they are very welcome.

[suth]

I haven't really worked with custom directives, but this seems to work:

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

    if (binding.arg) {
        if (!vnode.context.sortable) {
            vnode.context.sortable = {}
        }

        //  Throw an error if the given ID is not unique
        if (vnode.context.sortable[binding.arg]) {
            console.warn('[vue-sortable] cannot set already defined sortable id: \'' + binding.arg + '\'')
        } else {
            vnode.context.sortable[binding.arg] = sortable
        }
    }
}

[MunGell]

Hi @suth

Thank you for taking time for the research! I will take a look at your solution and will try to incorporate it into this PR

Thanks

[garygreen]

This doesn't seem to work for me - although the items are sortable, the actual order of the array inside VM doesn't get changed. Any ideas @davejamesmiller @MunGell ?

Vue.version "2.1.10"

[suth]

@garygreen listen for the onUpdate event and modify the array. Not sure if it's the best method but how I'm doing it for now.

onUpdateCallback(evt) {
  this.items.splice(evt.newIndex, 0, this.items.splice(evt.oldIndex, 1)[0])
}

[ctf0]

@MunGell why not re-release the package under a different name ex.vue-sortable-2 or something and now we can support both vuejs versions.

[MunGell]

Hi @ctf0

How would it be different from https://github.com/SortableJS/Vue.Draggable ?

[ctf0]

it uses a directive which is much easier to incorporate into any project without much work, ex.

<ul v-sortable="{ onUpdate: onUpdate }">
    <li v-for="item in list" :key="item.id">
        <p>{{item.title}}</p>
        <button class="delete" @click.prevent="deleteItem(item)"></button>
    </li>
</ul>

thats all i had to do beside making an ajax to get the list & remove an item, can Vue.Draggable be that easy ? specially that it pretty much does the same.

[anteriovieira]

@sagalbot any progress for this pull request?