带索引分配的表排序

Question

我有一个array 的对象：

ruta: [
    { 'order': 1, 'id': 121 },
    { 'order': 2, 'id': 123 }
]

我将它用作buefy 表的模型，同时，我使用扩展名sortable.js 手动对表行排序：

const createSortable = (el, options, vnode) => {
    return Sortable.create(el, {
        ...options,
        onEnd: function (evt) {
            const data = vnode.context.ruta
            const item = data[evt.oldIndex]
            if (evt.newIndex > evt.oldIndex) {
                for (let i = evt.oldIndex; i < evt.newIndex; i++) {
                    data[i] = data[i + 1]
                }
            } else {
                for (let i = evt.oldIndex; i > evt.newIndex; i--) {
                    data[i] = data[i - 1]
                }
            }
            data[evt.newIndex] = item
            //here
            for (let i = 0; i < data.length; i++) {
                data[i].order = i + 1;
            }
        }
    })
} 

表格已正确呈现，但我需要在每次手动排序时更新order 参数以反映表格的真实顺序。比如我需要把第五行移到表的开头，所以它的order参数应该是1，其余行需要反映2、3、4和5。

正如您在代码中看到的，我已经尝试过：

for (let i = 0; i < data.length; i++) {
    data[i].order = i + 1;
}

因为我想从 1 开始订单的价值。我还尝试将更改放入 if / else 块中：

if
    data[i].order = i + 1;
else
    data[i].order = i - 1;

但它也没有工作。行的顺序以错误的方式更改。

Answer 1

你已经在the Spanish SO site 上问过这个问题，我在那里给了你一个解决方案。我知道您已经解决了这个问题，但我将针对您的问题发布另一个解决方案，因为它将来可能对其他用户有用。

首先，我已经向你解释了为什么会出现这个问题：如果你改变模型的顺序改变它的索引值，Vuewill not detect the change，你需要用另一种方式修改array ，例如，制作splice。在您的代码中，Vue 仅在您更改 order 参数时才检测到更改，并且此时手动对列表进行排序，并且 array 的每个索引的值已更改，因此，视图将被更新错误：

┌───────────────┬───────────────┬──────────────────┬───────────────┐
│ Initial state │ -> Model      │ Manually sorting │ -> Model      │
├───────────────┼───────────────┼──────────────────┼───────────────┤
│ 1 - item 1    │ Array index 0 │ 1 - item 4       │ Array index 3 │
│ 2 - item 2    │ Array index 1 │ 2 - item 1       │ Array index 0 │
│ 3 - item 3    │ Array index 2 │ 3 - item 2       │ Array index 1 │
│ 4 - item 4    │ Array index 3 │ 4 - item 3       │ Array index 2 │
└───────────────┴───────────────┴──────────────────┴───────────────┘

我之前给你的解决方案：

const createSortable = (el, options, vnode) => {

    // Copy the order property
    vnode.context.data.forEach( (obj) => {obj.norder = obj.order} );

    // Create an array of orders
    const orders = vnode.context.data.map((obj) => obj.order);

    return Sortable.create(el, {
        ...options,
        onEnd: function (evt) {

            const data = vnode.context.data;      

            // Update the position of the objects
            orders.splice(evt.newIndex, 0, ...orders.splice(evt.oldIndex, 1));

            // Change the order parameter
            data.forEach((obj) => {        
                obj.order = orders.findIndex((n) => n === obj.norder) + 1;
            });

        }
    });
};

工作示例：https://codepen.io/elchininet/pen/JLQqEV

另一种解决方案：

另一种解决方案是在每次移动后重置手动排序并使用splice 更改array 顺序。看看：

const createSortable = (el, options, vnode) => {

    let order = [];

    return Sortable.create(el, {
        ...options,

        onStart: function (evt) {
            // when the sort starts, store the initial order of the array
            order = this.toArray();
        },

        onEnd: function (evt) {

            // when the sort ends, set the order to the initial state
            this.sort(order);

            // change the order using splice
            const data = vnode.context.data;

            data.splice(evt.newIndex, 0, ...data.splice(evt.oldIndex, 1));

            // now it is safe, you can update the order parameter
            data.forEach((o, i) => {
                o.order = i + 1;
            });

        }

    });

};

这里有一个工作示例：https://codepen.io/elchininet/pen/MVNaON