Moving components around & updating vuex just once.

Hi there,

Thanks so much for this component, massively useful!

I’m trying to use Vue.Draggable to manipulate a nested tree structure. I have used normalizr to normalize my tree, and I can update the components in the store as I drag them around. I made a fiddle here.

My issue is that when moving a component between children, the set method is called twice. It totally makes sense that it’s called twice, but, as I want to update an API I want to do it as one atomic move. Hopefully some code will make my question clear:

My main component has computed methods like this which do the updating:

  computed: {
    children: {
      get() {
        if( this.container.nodes) {
          return this.container.nodes.map((node_id) => this.$store.state.nodes[node_id]);
        } else {
          return [];
        }
      },
      set(value) {
       // this gets called twice when I move a node between containers.
       // which is fair enough, but I want to only post once to my API endpoint, so that the complete
       // move is atomic.
        let newOrder = value.filter(function(n) { return n != undefined }).map(function(v) { return v.id } )
        this.$store.commit('SET_NODES_FOR_CONTAINER', {
          containerID: this.container.id,
          nodes: newOrder
        });
      }
    }
  },

Now, my plan (possibly a bad plan) is that any time there’s a move event I want to persist the move back to an API endpoint. The thing is, I don’t really want to send the entire structure back and forth, just a call with the containerID and and nodes list. The issue is I get two of the set(value) calls, one for the container which had the child moved out of it, and one for where the child got moved into. I want to capture these two events and either do the complete move, or abort.

Is there a way to do this with Vue.Draggable ? Is this a bad approach ?

[patrickdavey]

Ah, my mistake, I had a component wrapping the entire tree structure, once I listened on that for the end event it all works perfectly.

Thanks again @David-Desmaisons for a fantastic library!!

[patrickdavey]

I think the issue I’m having is that I’m dragging the nested draggables around, the components aren’t actually wired up to “know” about the parent-child relationships, so the end event is being emitted but there’s no parent around to actually listen to the event.

Is there a way to wire in an event bus or similar so that I can catch the events? Anyway, I’ll keep on playing!