在 Sortable 组件中保存项目的位置,可以使用以下解决方法。
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
sortableOptions: {
onUpdate: (event) => {
this.items.splice(event.newIndex, 0, this.items.splice(event.oldIndex, 1)[0]);
}
}
};
}
data() {
return {
items: {
'item1': 'Item 1',
'item2': 'Item 2',
'item3': 'Item 3',
'item4': 'Item 4'
},
sortableOptions: {
onUpdate: (event) => {
const keys = Object.keys(this.items);
const draggedItem = keys[event.oldIndex];
keys.splice(event.oldIndex, 1);
keys.splice(event.newIndex, 0, draggedItem);
const newItems = {};
keys.forEach((key) => {
newItems[key] = this.items[key];
});
this.items = newItems;
}
}
};
}
data() {
return {
items: [
{ id: 1, name: 'Item 1', position: 1 },
{ id: 2, name: 'Item 2', position: 2 },
{ id: 3, name: 'Item 3', position: 3 },
{ id: 4, name: 'Item 4', position: 4 }
],
sortableOptions: {
onUpdate: (event) => {
const draggedItem = this.items[event.oldIndex];
this.items.splice(event.oldIndex, 1);
this.items.splice(event.newIndex, 0, draggedItem);
this.items.forEach((item, index) => {
item.position = index + 1;
});
}
}
};
}
这些方法都使用 onUpdate 事件来监听项目的拖动排序操作,然后根据拖动前后的位置对项目的位置进行更新。最终可以将项目的位置保存在一个数组或对象中,以便在需要时使用。