我正在使用 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');
}
关于javascript - Vuejs可拖动排序列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58585715/