vuetify data-table + dragula

Question

J'ai un problème avec rendre le travail datable avec dragula. J'utilise le wrapper vue2-dragula.

Voici un violon qui démontrent le problème que je n'étais pas en mesure de faire le travail en tant que tel dragular

https://jsfiddle.net/Lscqm9je/

Sur mon ordinateur, il fonctionne comme prévu. Le seul problème est la mention ALIGNEMENT colonne datatable si vous regardez sur la première table, nous perdons l'en-tête/alignement de données parce que j'ajouté un div entre modèle et 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> 

donc je suppose que mettre quelque chose entre modèle de table et la ligne du tableau est un non-non. Mais c'est la seule façon de faire fonctionner la directive dragula. La directive doit être parent direct de l'élément déplaçable (tr). J'ai également essayé de placer la directive dans la balise de modèle, mais cela ne semble pas possible. Ce que je cherche est une table qui ressemble à la 2ème dans le violon mais avec la directive de dragula fonctionnant. Quelqu'un a une idée? Je suis un débutant sans réel degré de programmation donc il pourrait être quelque chose de stupide, désolé d'avance si c'est le cas :)

merci.

Plus d'informations:

cela ne fonctionne pas:

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

Ce travail, mais la cellule sont traînés individuellement au lieu de la ligne.

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

Answer 1

La console sur le violon donne un avertissement

[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>) 

regardant la vue-dragula page readme, v-dragula="..." doit pointer à la collecte de données, pas l'élément, je suppose qu'il sera être

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

Ceci pourrait vous permettre d'aller un peu plus loin. À un moment donné, la deuxième table affichait une icône en train de glisser, mais ce n'est pas le cas maintenant, je ne sais pas pourquoi. Si je reçois d'autres indices, je vais mettre à jour.

BTW, <template> au lieu de <div> est préféré, comme <table> est chatouilleux sur les balises internes (bien que peut attendre Vuetify pour gérer cette question).