andrewcourtice / vuetiful

Vuetiful is a component framework written on top of the Vue reactive library. It is primarily designed for creating business/administration applications where the displaying of data is paramount.
MIT License
488 stars 108 forks source link

Way to get the underlaying model data on drop? #24

Closed caleywoods closed 7 years ago

caleywoods commented 7 years ago

I have the datatable loading rows after a lodash debounced ajax call. Each of my records coming back contain many properties , one of these is display_order. The data I am dealing with involves invoices so we're showing line items in the datatable and this display_order property controls in what order they show.

I have setup a drop event which is wired up, it looks like this:

/* on my .vue file, actually Hello.vue from the demo app */
created () {
    let service = this.$dragula.$service

    service.eventBus.$on('drop', this.handleDrop)
},
methods : {
    handleDrop(e) {
        /* e contains the data in the screenshot below 
            I'd like to access the display_order of my row here so I can sync it with the new order of the row
            I've noticed that e.el.rowIndex shows the new index of the row but I don't have access to the model
            that I can see
        */
    }
}

"e" data example

I've tried removing the handleDrop() method and going with the handler as a function within the service.eventBus.$on('drop', (e) => {}) but noticed the data looking the same way. I have seen that e.drake.models[0].model seems to contain the datacell records but trying to fetch the model by its rowIndex has not worked (it's always off and shows me the wrong record).

TL;DR - Does there exist a way of defining a handler for the drop event of a table row (a datacell) so that you can access the underlaying properties of your model?

caleywoods commented 7 years ago

Opening this up on vue2-dragula, was in the wrong repo.