UIkit的Sortable组件怎么实现拖拽后数据不同步？

技术国玲提问于 2026-02-04 14:10:27 阅读 45

组件

我在用UIkit的Sortable做列表拖拽排序时遇到问题，拖拽元素位置变了但绑定的数组数据没更新。按照文档加了标签，给元素绑了，数据是用v-model双向绑定的数组，但拖拽后控制台打印数组还是原始顺序。

试过监听update事件，但事件根本没触发。代码是这样写的：v-on:update="updateOrder"，这个写法对吗？数据是响应式的，但拖拽后数组元素位置没变。是不是需要手动同步索引？


<u-sortable v-model="items" @update="updateOrder">
  <div v-for="(item, index) in items" :key="index" u-sortable-item>
    {{ item.name }}
  </div>
</u-sortable>

UIkit UI框架

我来解答赞 9 收藏

反馈

2 条解答

世杰酱~ Lv1

你这个问题我之前也踩过。UIkit 的 Sortable 组件默认不会自动同步排序后的数据到你的 v-model，因为它是操作 DOM 的顺序，不会自动触发 Vue 的响应式更新机制。

你代码里用了 v-model 和 @update 事件是对的，但 UIkit 的 Sortable 不是 Vue 原生组件，它对 v-model 的支持其实只是个“伪绑定”，你得手动处理排序后的数据更新。

正确的做法是监听 moved 事件（UIkit 的事件名不是 update），然后在事件处理函数里手动更新数组。

下面是改好的代码：

<u-sortable list="items" @moved="updateOrder">

  <div v-for="(item, index) in items" :key="index" u-sortable-item>

    {{ item.name }}

  </div>

</u-sortable>

然后 JS 部分：

methods: {

  updateOrder() {

    // UIkit 会自动调整 DOM 顺序，但我们还要手动更新数据

    // 这里可以用一个简单的 slice 来更新数组顺序

    this.items = [...this.items];

  }

}

注意几点：
- moved 是 UIkit Sortable 提供的事件，不是 Vue 的 update。
- slice 是为了触发 Vue 的响应式更新机制。
- 如果你用的是 UIkit 的 HTML/JS 混合写法，那 v-model 其实没用，可以去掉。
- 确保你引用的 UIkit 版本支持 moved 事件，否则得用 changed 然后判断类型。

下次遇到 DOM 操作和数据不同步的问题，记得检查是否是框架封装组件的事件是否正确绑定，别被表面上的 v-model 欺骗了。

2026-02-04 21:09

码农爱玲 Lv1

你这情况应该是用的 UIkit 的 Vue 封装组件，但数据不同步，问题出在几点：

1. 是 UIkit 的 Vue 组件，它内部操作的是 DOM，不是 Vue 数据，v-model 不一定自动更新你传进去的数组。
2. @update 事件没触发，说明你可能用错了事件名或组件版本不支持，UIkit Sortable 的 Vue 封装不一定完整暴露所有底层事件。
3. 拖拽后数组没变，说明你没在事件中手动更新数组顺序，UIkit Sortable 需要你自己手动同步数据。

**正确的做法是：**

- 用原生 UIkit 的 Sortable 初始化方式，不要依赖组件。
- 在 Vue 的 mounted 钩子里手动初始化 UIkit 的 Sortable，并监听它的 moved 事件。
- 在 moved 事件里用 DOM 元素索引更新 Vue 的数组。

示例代码如下：

mounted() {

  const el = this.$refs.sortableContainer;



  UIkit.sortable(el, {

    group: 'some-group-name'

  }).on('moved', (e, sortable) => {

      const newIndex = sortable.element.children().index(sortable.placeholder);

      const oldIndex = parseInt(sortable.placeholder.attr('data-old-index'));



      // 手动更新数组顺序

      const movedItem = this.items.splice(oldIndex, 1)[0];

      this.items.splice(newIndex, 0, movedItem);



      // 可选：更新后触发其他逻辑

      this.$emit('update:items', this.items);

    });

}

然后模板里加上 ref="sortableContainer"，并手动给每个 item 加 data-old-index 属性：

<div ref="sortableContainer" class="uk-sortable">

  <div

    v-for="(item, index) in items"

    :key="item.id"

    :data-old-index="index"

    class="uk-sortable-item"

  >

    {{ item.name }}

  </div>

</div>

这样就能确保拖拽时 DOM 和数据同步更新了。UIkit 的 Vue 封装很多时候都只是简单包装，复杂场景还是得用原生 JS 操作，不然很容易掉坑。WP里面也常遇到类似封装库和数据不同步的问题，基本都是这么处理的。

2026-02-04 14:29