项目的vue.draggable和持久化位置

Question

我正在尝试使用vue.draggable进行持久化卡片排序，我还没有在挂载上进行排序，而且我有点纠结于更新所有节点的索引

在draggable上，我调用

 <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拖拽的初始状态。感谢您的帮助。谢谢

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 })
          }
        }
      }
    },

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