데이터 표 + 드래그를 활성화하십시오

Question

드래그러로 vuetify 데이터 테이블 작업을하는 데 문제가 있습니다. 래퍼 vue2-dragula를 사용하고 있습니다. 여기

내가 dragular 일 내 컴퓨터에서 자체

https://jsfiddle.net/Lscqm9je/

의도 한대로 작동을 할 수 없습니다 불구하고 문제를 보여줍니다 바이올린입니다. 첫 번째 테이블에 보면 유일한 문제는 내가 템플릿과 TR 사이에서 사업부를 추가하기 때문에, 우리는 헤더/데이터 정렬을 풀어 DataTable에 열 alingment입니다 그래서 테이블 템플릿 사이에 뭔가를 넣어 같아요

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

테이블 행은 no-no입니다. 하지만 드래그 럴 지시어를 작동시키는 유일한 방법입니다. 지시문은 드래그 가능한 요소 (tr)의 직접적인 부모이어야합니다. 또한 템플릿 태그 내에 지시문을 넣으려고했지만 가능하지는 않습니다.

내가 찾고있는 것은 바이올린의 두 번째처럼 보이는 테이블이지만 드래그러 지시문이 작동하는 테이블입니다. 누군가 아이디어가 있으십니까? 나는 진짜 프로그래밍 학위가없는 초보자이기 때문에, 어리석은 일 이겠지만, 미리 미안 하구나.

감사합니다.

더 자세한 정보는 :

이 작동하지 않습니다

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

이 작품은 그러나 셀은 개별적으로 대신 전체 라인의 끌고있다.

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

Answer 1

바이올린의 콘솔이 VUE-dragula 추가 정보 페이지를 보면 경고

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

을주고, v-dragula="..." 데이터 수집이 아닌 요소를 가리켜 야, 그래서 그것을 것 가정 be

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

이것은 조금 더 나아질 수 있습니다. 어느 시점에서 드래그 할 때 두 번째 테이블에 아이콘이 표시되었지만 지금은 그렇지 않습니다. 이유가 확실하지 않습니다. 추가 단서를 얻으면 업데이트 할 것입니다.

<div> 대신 <template>이 바람직합니다. <table>은 내부 태그에 민감합니다 (Vuetify가 해당 문제를 관리한다고 생각할 수도 있음).