Using with v-for

[chinchang]

Can't this be used along with v-for where items are dynamic?

[callumacrae]

@chinchang: did you figure this out how to do this? Currently looking to solve the same problem.

[Frozire]

@chinchang & @callumacrae

Please describe your problem further or include some code. I have no problem using this package and v-for.

[chinchang]

@Frozire Right now all examples show the usage on a static list, like so:

<ul class="list-group" v-sortable:basic>
 <li class="list-group-item">Foo</li>
 <li class="list-group-item">Bar</li>
 <li class="list-group-item">Baz</li>
</ul>

I tried it on a dynamic list made with v-for and doesn't work:

<ul class="list-group" v-sortable:basic>
 <li v-for"item in items" class="list-group-item">{{item}}</li>
</ul>

[Frozire]

@chinchang This works just fine for me.

There are two changes you can try - try to put the class declaration in front of the v-for, like this:

<ul class="list-group" v-sortable:basic>
 <li class="list-group-item" v-for"item in items">{{item}}</li>
</ul>

And/or wrap a div inside, to have an actual element to grab.

<ul class="list-group" v-sortable:basic>
 <li class="list-group-item" v-for"item in items">
       <div>{{item}}</div>
    </li>
</ul>

[callumacrae]

I ended up calling Sortable directly to make the array sortable too. I wrote an article about it: http://macr.ae/article/vue-sortable.html

[chinchang]

@callumacrae gr8 👍 Thanks!

[David-Desmaisons]

@callumacrae, @chinchang You can also use this library: Vue.Draggable It handles synchronization with list automatically both in Vue 1 (directive) amd Vue 2 (component). Disclaimer: I am the author.

[sagalbot]

@David-Desmaisons nice work on your library! I may end up linking to yours directly - maintaining vue-select keeps me pretty occupied, not sure I have time to maintain both on my own.