vue.draggable and persistant positions of items

Question

I am trying to have persistent card sorting with vue.draggable, I have yet to work on ordering on mounted and I am a little stuck with updating the index of all my nodes

on draggable I call

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

(FYI my draggable items are called nodes)

The above works well to update the correct node with the correct newIndex position but of course all the other nodes now also have newIndex positions but I am unsure where I can catch that information so as to update the database with all the other newIndex's ? I feel like after I have hear @update I need to then say hey give me all your indexs of all draggable items please and then I can loop that into the dispatch... but I also need to make sure to update the correct nodeid...

Then once I have that worked out I need to arrange nodes on mounted with the nodesort positioning for vue draggables initial state. Any help appreciated. Thanks

Answer 1

Ive managed to store the position of each node now in the right place as follows

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

But what I want to do is on mounted / on update assign the draggable items in th list the correct position(index) based on the database - I cant see how I access that to make it dynamic I thought data-id but I am not sure which element this is attached to