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