vuetify data-table + dragula

Question

I have a problem with making vuetify datatable work with dragula. I'm using the wrapper vue2-dragula.

Here is a fiddle that demonstrate the problem though i wasn't able to make dragular work per se

On my computer it's working as intended. The only problem is the datatable column alingment if you look on the first table, we loose the header / data alignment because i added a div in between template and tr

<v-data-table  v-bind:headers="headers" v-bind:items="items" hide-actions>
              <template slot="items" scope="props">
                <tbody v-dragula="tr" drake="first" class="container">
                  <tr>
                    <td class="text-xs-right">{{ props.item.round }}</td>
                    <td class="text-xs-right">{{ props.item.cat }}</td>
                    <td class="text-xs-right">{{ props.item.p1 }}</td>
                    <td class="text-xs-right">{{ props.item.p2 }}</td>
                    <td class="text-xs-right">{{ props.item.statut }}</td>
                  </tr>
                </tbody>
              </template>
            </v-data-table>

So i guess putting something in between table template and table row is a no-no. But it's the only way i found to make dragula directive work. The directive must be direct parent of the draggable element ( tr ). I also tried to put the directive within the template tag but it's doesn't seem to be possible.

<template slot="items" scope="props" v-dragula="tr" drake="first" class="container">

what i'm looking for is a table that look like the 2nd in the fiddle but with the dragula directive working. Someone have an idea ? I'm a beginner with no real programming degree so it might be something stupid, sorry in advance if it is :)

thank.

More information :

this doesn't work :

<template slot="items" scope="props" v-dragula="tr" drake="first" class="container">
                  <tr>
                    <td class="text-xs-right">{{ props.item.round }}</td>

This work but the cell are dragged individually instead of the whole line.

<template slot="items" scope="props">
                  <tr v-dragula="tr" drake="first" class="container">
                    <td class="text-xs-right">{{ props.item.round }}</td>

score 0 · Answer 1 · answered Oct 12 '17 at 02:30

The console on the fiddle is giving a warning

[Vue warn]: Property or method "tr" is not defined on the instance but referenced during render. 
Make sure to declare reactive data properties in the data option.
(found in <Root>)

Looking at the vue-dragula readme page, v-dragula="..." should point to the data collection, not the element, so I assume it will be

<template slot="items" scope="props" v-dragula="items" drake="first" class="container">

This might get you a little further. At one point the second table was showing an icon upon dragging, but it's not doing so now, I'm not sure why. If I get any further clues, I'll update.

BTW, <template> instead of <div> is preferred, as <table> is touchy about internal tags (although might expect Vuetify to manage that issue).

vuetify data-table + dragula

1 Answers1