I'm currently experimenting with integrating vue-draggable into Vuetify's v-data-table based on the instructions provided in this article : https://medium.com/vuetify/drag-n-drop-in-vuetify-part-ii-2b07b4b27684
The article mentions : "The main objective was to make the tbody of the table a draggable component, which proved challenging due to Vuetify utilizing templates for item rendering."
Subsequently, the individual discovered a solution involving Sortable JS. I attempted to implement it but encountered issues.
An error message stating: Sortable: el must be an HTMLElement, not [object Function], keeps appearing.
According to some sources, Sortable JS may not function properly with Vue JS 2...
What should I do next?
If you have a resolution, kindly share it with me :)
This is my code :
<v-data-table :headers="headers" :items="slots" :items-per-page="-1" ref="sortableTable" > <template v-slot:item="props"> <tr v-if="props.item.recipe" class="sortableRow"> <td style="text-align: center">{{props.item.slot}}</td> <td style="text-align: center" v-if="props.item.recipe.preferences"> <v-chip v-for="pref in props.item.recipe.preferences" :key="pref" small > {{ pref }} </v-chip> </td> <td style="text-align: center">{{props.item.recipe.protein}}</td> <td style="text-align: center">{{props.item.recipe.protein_cut}}</td> <td style="text-align: center">{{props.item.recipe.carb}}</td> <td style="text-align: center" v-if="props.item.recipe.tags"> <v-chip v-if="props.item.recipe.tags.indexOf('c3_appropriate') !== -1" small color="success" text-color="white" > C3 </v-chip> </td> <td style="text-align: center">{{props.item.recipe.ready_in}}</td> <td style="text-align: center"> <v-chip small :color="props.item.recipe.new_repeat === 'repeat' ? 'error' : 'success'" > {{ props.item.recipe.new_repeat }} </v-chip> </td> <td style="text-align: center"> {{ props.item.recipe.title + ' ' }} <span v-if="props.item.recipe.subtitle" style="font-size: 11px" > <br> {{ props.item.recipe.subtitle }} </span> </td> </tr> <tr v-else> <td style="text-align: center">{{props.item.slot}}</td> </tr> </template> </v-data-table> mounted() { let table = document.querySelector("table tbody"); console.log(table) const _self = this; Sortable.create(table, { draggable: '.sortableRow', handle: ".handle", onEnd({newIndex, oldIndex}) { const rowSelected = _self.slots.splice(oldIndex,1)[0]; _self.slots.splice(newIndex, 0, rowSelected); } }); }