Vuejs draggable sorted list

I'm using Vue.Draggable plugin to implement a draggable list, i'm passing a sorted computed property, like the following:

data(){

return {

 paymentMethods: [
        { name: 'stripe', Dindex: 0, state: 2 },
        { name: 'paypal', Dindex: 1 , state: 1 },
        { name: '2checkout', Dindex: 2, state: 4 },
        { name: 'cod', Dindex: 3, state: 3 }
   ],
}
}

computed: {

payments() {

       return _.sortBy(this.paymentMethods, 'state');
},
}

Draggable list:

<draggable :list="payments" class="payment-methods" tag="ul" @start="drag=true" @end="drag=false" @change="indexChanged">
   <li v-for="(method, index) in payments" :key="index">
        <!-- list data -->
   </li>
</draggable>

The problem here is the draggable list never works because i'm forcing the list sorting (using lodash _.sortBy), the question is how i can sort inside a draggable list.

skauk

6 years ago

Best Answer

Level 8

If you need to sort your items initially by state, you have to do it once when component is created. By using computed property which sorts your data you won't be able to display your items in the order that Draggable produces as the data gets sorted continuously for display.

created() {
    this.paymentMethods = _.sortBy(this.paymentMethods, 'state');
}

and in the template:

<li v-for="(method, index) in paymentMethods" :key="index">
    <!-- list data -->
</li>

1 like

Please or to participate in this conversation.