Vue Draggable 拖拽后列表顺序没更新，怎么回事？

夏侯秀丽提问于 2026-03-19 12:43:21 阅读 14

交互

我用 Vue Draggable 做了个可拖拽的列表，但拖完之后 data 里的数组顺序根本没变，明明绑定了 v-model 啊？是不是哪里写错了？

我试过用 @end 事件打印 list，发现还是原来的顺序。代码大概是这样：

<template>
  <draggable v-model="list" item-key="id">
    <template #item="{ element }">
      <div>{{ element.name }}</div>
    </template>
  </draggable>
</template>

<script setup>
import draggable from 'vuedraggable'
const list = ref([
  { id: 1, name: 'A' },
  { id: 2, name: 'B' }
])
</script>

我来解答赞 11 收藏

反馈

1 条解答

UP主～会娟 Lv1

这个问题很常见，Vue Draggable 在 Vue 3 下有几个坑要踩。

先试试把 v-model 改成 :list 绑定：

如果还是不行，检查一下你的 item-key写法，Vue 3 版本里要写成函数形式：

item-key="(item) => item.id"

还有一种可能是版本问题，确保你装的是支持 Vue 3 的版本：

npm install vuedraggable@next

vuedraggable@next 是 Vue 3 专用的，用成旧版本的话 v-model 可能不生效。

如果上面都试了还是没反应，可以在 @change 事件里手动处理：


  :list="list" 

  item-key="(item) => item.id"

  @change="handleChange"

>

  ...





const handleChange = (evt) => {

  console.log('顺序变了', list.value)

}

这样能确认事件有没有触发，以及 list 到底有没有被修改。

2026-03-19 13:00