SortableJS / vue.draggable.next

Vue 3 compatible drag-and-drop component based on Sortable.js
https://sortablejs.github.io/vue.draggable.next/#/simple
MIT License
3.82k stars 524 forks source link

Dose not work with composition api? #59

Open huangche007 opened 3 years ago

huangche007 commented 3 years ago

First check https://github.com/SortableJS/Vue.Draggable/blob/master/CONTRIBUTING.md

Hi, when i use this plugin in vue3,it dose not work(view dose not show correctly)。

"vuedraggable": "^4.0.3"

example is there:

<draggable 
  v-model="testPeoples " 
  @start="drag=true" 
  @end="drag=false" 
  item-key="id">
  <template #item="{element}">
    <div>{{element.name}}</div>
   </template>
</draggable>

<script lang="ts">
import { defineComponent, ref, Ref, watch } from 'vue'
import draggable from 'vuedraggable'

export default defineComponent({
  components: {
    draggable,
  },
  setup(props, ctx) {
     const drag = ref<boolean>(false)
     const testPeoples = ref([
        {
          id: '123',
          name: '黄澈',
          checked: false,
        },
        {
          id: '1231',
          name: '黄澈1',
          checked: false,
        },
        {
          id: '1232',
          name: '黄澈2',
          checked: false,
        },
        {
          id: '1233',
          name: '黄澈3',
          checked: false,
        },
        {
          id: '1234',
          name: '黄澈4',
          checked: false,
        },
        {
          id: '1235',
          name: '黄澈5',
          checked: false,
        },
      ])
     return {
        testPeoples,
        drag
    }
}
})
</script>
huangche007 commented 3 years ago

when i use toRaw api,it also dose not work:

 import { defineComponent, ref, Ref, watch, toRaw } from 'vue'
 let mList: Array<any[]> = []
 mList = toRaw(checkedList.value)

 <draggable 
    v-model="mList" 
    @start="drag=true" 
    @end="drag=false" 
    item-key="id">
      <template #item="{element}">
        <div>{{element.name}}</div>
       </template>
 </draggable>
jesusgabri3l commented 3 years ago

Hey!, any update on this issue? did you come up with the solution?

miskying commented 3 years ago

澈哥真有缘

hb0nes commented 3 years ago

I also don't see anything after installing with yarn.

just doesn't appear. Vue version: vue@3.1.2
hb0nes commented 3 years ago

Actually it does work in composition API. I reread the instructions and forgot to import draggable and expose it as a component. Stuff works beautifully now.