Jira Kanban看板拖拽排序后数据没更新怎么办？

一莹🍀 提问于 2026-03-09 19:46:25 阅读 17

工具

我在用Vue做Jira风格的Kanban看板，用了vue-draggable-plus实现列内卡片拖拽排序。本地视图能正常拖动，但拖完之后发请求更新后端，发现传过去的顺序还是原来的，根本没变！

我打印了dragEnd事件里的list，看起来顺序是对的，但一提交就出问题。是不是我绑定的方式不对？下面是我的模板代码：

<draggable v-model="column.tasks" 
          group="tasks" 
          @end="onDragEnd(column)"
          item-key="id">
  <template #item="{ element }">
    <div class="task-card">{{ element.title }}</div>
  </template>
</draggable>

onDragEnd里直接拿this.column.tasks去发axios请求，但后端收到的顺序和拖之前一样……这到底咋回事？

Jira Kanban看板

我来解答赞 4 收藏

反馈

1 条解答

Good“芳宁 Lv1

啊这个问题我太熟了，vue-draggable经常遇到的坑。你这种情况是因为v-model绑定的数组引用没变，直接提交的话Vue的响应式系统可能没触发更新。

简单粗暴的解决方案：在onDragEnd里深拷贝一下数组再提交。改成这样：

onDragEnd(column) {

  const newOrder = JSON.parse(JSON.stringify(column.tasks))

  axios.post('/api/update-order', { tasks: newOrder })

}

更专业的做法是用Vue.set或者[...spread]语法强制触发响应式更新：

this.$set(this.column, 'tasks', [...this.column.tasks])

顺便说句，如果你用WordPress做后端的话，wp_ajax钩子处理这个请求会更方便，不过那是另一个话题了。

2026-03-09 20:06