使用 v-draggable 的方式的问题

[nameJw]

vue3、vue-draggable-plus: v0.6
按照 文档的基础使用指令的方式：
`<div
v-draggable="[cardList, { animation: 150, onStart, onEnd }]"
v-loading="listLoading"
class="flex flex-col gap-10px mr-20px"

<div v-for="card in cardList" :key="card.id"></div>

`

在页面上能够看到拖拽已经生效，但是拖拽完成松开鼠标的时候，页面上的列表又回到开始的顺序了，并且在 onEnd 事件打印 cardList 也没有排序成功

[nameJw]

@Alfred-Skyblue 找了好久，问题在给的 list 默认值，如果初始值给了空数组，那就出现了是上面提到的问题，如果 ref 不给值，那就不会出现这个问题。另外还有一个问题就是，如果排序正常了，那在拖动的时候拖动效果没有了。你可以试试这两种情况

<template>
  <ElScrollbar style="max-height: 300px" tag="div">
    <div class="flex flex-col gap-10px pr-20px" v-draggable="[list, { animation: 200 }]">
      <div v-for="item in list" :key="item" class="w-80px h-30px bg-[#4A73FF] text-center">{{
        item
      }}</div>
    </div>
  </ElScrollbar>
</template>
<script setup lang="ts">
import { vDraggable } from 'vue-draggable-plus'

// 问题在这，这里给了 默认 空数组
const list = ref<number[]>([])

onMounted(() => {
  getCardList()
})

const getCardList = () => {
  return new Promise(() => {
    setTimeout(() => {
      list.value = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }, 1000)
  })
}
</script>

[Alfred-Skyblue]

如果是异步的数据，建议使用组合式函数或者组件的方式，指令无法检测到数据更新！