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.
While it is a computed value the list will sorted again when you drag it. I think the best thing to do is sort it when mounted:(So only initially)