vue.draggable和persistent项目位置

Question

我正在尝试使用vue.draggable进行持久的卡片排序，我还没有在挂载时进行排序，我有点拘泥于更新所有节点的索引

在Dragable上，我打电话给

<draggable
class="grid"
name="grid"
@start="drag = true"
@end="drag = false"
@update="nodePositionIndex"
>
<div v-for="(nodes, index) in $options.myArray" v-bind:key="index">
...

nodePositionIndex(e) {
console.log(e.newIndex)
console.log(e.oldIndex)
nodeid = e.item.firstChild.firstChild.id
nodesort = e.newIndex
this.$store.dispatch('sortNode', { nodeid, nodesort })
},

(仅供参考，我的可拖动项目称为节点(

上面的方法可以很好地用正确的newIndex位置更新正确的节点，但当然所有其他节点现在也有newIndex位置，但我不确定在哪里可以捕捉到这些信息，以便用所有其他newIndex更新数据库？我觉得在我听到@update之后，我需要说，嘿，请给我所有可拖动项目的所有索引，然后我可以将其循环到调度中。。。但我也需要确保更新正确的nodeid。。。

然后，一旦我解决了这个问题，我就需要在挂载上排列节点，并对vue-draggables的初始状态进行nodesort定位。感谢您的帮助。感谢

Answer 1

我现在设法将每个节点的位置存储在正确的位置，如下所示

nodePositionIndex() {
var i
var j
var dragger = document.getElementById('dragger')
for (i = 0; i < dragger.childNodes.length; i++) {
var count = i
for (j = 0; j < Object.keys(this.configPositions).length; j++) {
if (
dragger.childNodes[i].firstChild[0].id ==
this.configPositions[j].node_id
) {
nodeid = this.configPositions[j].node_id
nodesort = count
this.$store.dispatch('sortNode', { nodeid, nodesort })
}
}
}
},

但我想做的是在挂载/更新时，根据数据库为列表中的可拖动项目分配正确的位置(索引(-我看不出我是如何访问它以使其动态的。我认为数据id，但我不确定这是附在上的哪个元素