Vue.js Vuejs可拖动排序列表

我正在使用Vue.Draggable插件来实现一个可拖动列表，我正在传递一个排序的计算属性，如下所示：

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="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>

---

这里的问题是可拖动列表永远无法工作，因为我正在强制列表排序（使用lodash

.sortBy

），问题是如何在可拖动列表中排序。

当它是一个计算值时，当您拖动它时，列表将再次排序。我认为最好的办法是在挂载时对其进行排序：（因此仅在初始阶段）

data() {
  return {
    payments: []
    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 }
    ],
  }
}
mounted() {
    payments = _.sortBy(this.paymentMethods, 'state');
}