4

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

4

2 回答 2

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');
}
于 2019-10-28T08:56:32.337 回答
0

我知道这有点旧，但我也尝试过谷歌搜索解决方案，但找不到任何解决方案。几分钟后，我想出了这个：

// <template />

<draggable
    class="drag-wrapper selected-cols"
    v-bind="dragOptions"
    ...other props
    @change="colChange"
>
    <div v-for="(col, i) in availableColumns" :key="col.name + '-' + i">
        <div class="drag-area">
            {{ col.label }}
        </div>
    </div>
</draggable>


// <scripts />

methods: {
    colChange(e) {
        this.availableColumns.sort((a, b) => 
           a.label.localeCompare(b.label));
        },
    },

因此，我没有使用计算进行排序，而是在 @change 侦听器中进行排序，因为在 vuedraggable 完成排序之后调用它。

于 2022-01-12T17:45:05.213 回答