DEV Community

Discussion on: Draggable table row with VueJS, Vuetify and SortableJS

Collapse
 
juretopolak profile image
juretopolak

Shouldn't be data reactive with that I mean that the order of data should also change in the array?
This is the case with vuedraggable when using div or ul/li tags, but is not with this example using v-data-table.

dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
gaisinskii profile image
Andrey Gaisinskii

I'm not an expert in Vue/VueDevTools/Vuetify nor VueDraggable, but my question is: Why should it be reactive ? Because what we are doing is that we are using a wrapper library of SortableJS inside vuetify table component, there are no direct binding between vue/vuetify table component and VueDraggable library. We pass our array or items into vuetify table and then VueDraggable does its magic. If you want to do something upon table change you can use update event of VueDraggable, something like this:

   <v-data-table
      :headers="tableHeaders"
      :items="homePage.coupons"
      :loading="loading"
      item-key="id"
      :show-select="false"
      :disable-pagination="true"
      :hide-default-footer="true"
      class="page__table"
    >
      <template v-slot:body="props">
        <draggable
          :list="props.items"
          :handle="'.handle'"
          tag="tbody"
          @update="handleTableUpdate(props.items)"
        >
          <!-- other html here -->
        </draggable>
      </template>
    </v-data-table>
Enter fullscreen mode Exit fullscreen mode