javascript - Vuejs可拖动排序列表

Question

我正在使用 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 )，问题是我如何在可拖动列表中进行排序。

Answer 1

虽然它是一个计算值，但当您拖动它时，列表将再次排序。我认为最好的办法是在安装时对其进行排序:(所以只是最初)

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');
}