Vuetify v-data-table drag and drop

Question

I am using V-data-table along with vuex store. Below are the points how I configured my v-data-table

Disabled sort on each column
bind the v-data-table items with vuex state store data
using sortablejs to drag and drop the rows

Problem: When I drag and drop the rows in the v-data-table the I am updating the vuex store(updating the index value on the objects in array with the table row index value). Vuex is updating properly but the data rendered in the v-data-table is not in the order as they are in the vuex state store

Could someone help me on this

The best way I tried to overcome this problem is to force re-render the v-data-table component, but when I do this I cannot drag and drop anymore

Force rendered using the following the template

<template>
  <component-to-re-render :key="componentKey" />
</template>
// script
export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
}

This is the method I call on mount life cycle hook, which calls the mutation from vuex action and updates the order of objects in an vuex state store array Sortable.create(table, { handle: ".handle", onEnd ({ newIndex, oldIndex }) { _self.$store.dispatch('adSets/updateAdSets', {oldIndex: oldIndex, newIndex: newIndex, orderId: _self.orderId, campaignId: _self.campaignId}) // location.reload() // _self.$refs.table.$forceUpdate() // _self.forceRerender() _self.reset() } }) — Manideep Kothapalli

deepmicrobe deepmicrobe · Accepted Answer · 2019-07-17T17:46:03

This might not be the optimal solution, but I had a similar problem except I was just using a regular Array. I managed to fix it by calling the Sortable.create() method in updated() life cycle hook.

My guess is that when you call Sortable.create(table, ...) it refers to that instance of the table element. However, when you try to change the table by modifying the key, it changes that instance. Therefore, you need to call Sortable.create() again whenever the vue component is updated.

Vuetify v-data-table drag and drop

1 Answers