vue.js에서 드래그 가능한 테이블 tr이 이동되지 않았습니다

Question

vue.js 2.0을 사용하고 Vue.Draggable을 사용하여 드래그 가능한 테이블을 만들었습니다. 오류가 없지만 tr을 끌려고하면 이동하지 않습니다. 하지만 div을 사용하여 이동했습니다. 내가 놓친 게 있니?

index.html을

<div id="service-list"> 
<table> 
    <draggable :list="services" :element="'tbody'"> 
     <tr v-for="service in services"> 
      <td>{{ service.name }}</td> 
      <td>{{ service.price }}</td> 
     </tr> 
    </draggable> 
</table> 
</div> 

내가이 같은 문제로 실행

var service_list = new Vue({ 
    el: '#service-list', 
    data: { 
    services: [] 
}, 
mounted: function() { 
    var that = this; 
    $.get({ 
     url: 'use my url', 
     success: function(res) { 
      that.services = res; 
     } 
    }) 
} 

Answer 1

app.js. div을 사용하면 문제가 없지만 tr을 사용할 때 문제가 없습니다. 이것은 element 설정을 발견 한 후에도 마찬가지입니다.

마리우스가 그의 코멘트에서 지적한 것처럼 GitHub Issue #61이 나를 위해 문제를 해결했습니다.

무엇이 문제입니까? draggable HTML 코드가 index.html에 해당합니다. 코드를 템플릿으로 옮기면 작동하기 시작합니다.

이 템플릿 요구 사항이 table 경우에만 존재하고 div 사례가 아닌 이유는 분명하지 않습니다. 뷰 문서의 일부분에 GitHub의 문제에

, the author refers : DOM Template Parsing Caveats는

저자는 또한 JSFiddle에 나타난 예를 제공한다.

가치가있는 점은 ... 템플릿을 사용하지 않고도 vue-sortable을 사용하는 테이블에서 작업하도록 끌고 갈 수있었습니다. vue-sortable의 단점은 Vue2에 대해 유지 관리되고 업데이트되지 않았다는 것입니다. Vue2와 함께 설치하려면 workaround을 찾았습니다. 일단 설치되면 작업하는 것이 더 쉬웠지만 기능이 줄어 들었습니다.