Vue搭配SortableJS使用计算属性时如何正确实现数组重排序

实际异常场景 #

• 需求是从全量元素数组中筛选部分元素单独渲染，结合SortableJS的Vue拖拽组件实现列表交互排序
• 最初的实现逻辑是基于全量数组编写计算属性，通过筛选拆分出偶数、奇数两个独立元素列表，分别渲染两个并排的展示区域
• 实际运行的异常表现：绑定全量数组的偶数列表拖拽重排序功能完全失效，没有绑定拖拽的奇数列表渲染逻辑完全正常

问题核心根因 #

1. 数据绑定范围完全不匹配：拖拽组件的v-model直接绑定了包含所有奇偶元素的全量数组，但组件内部实际渲染的是经过筛选的偶数子集，二者覆盖的元素范围根本对不上。拖拽操作触发位置变更时，组件会按照当前可见列表的索引位置，直接修改绑定的全量数组，但全量数组里还混着没在当前区域显示的奇数元素，算出来的变更索引和实际DOM位置错位，最终就会出现拖拽拖不动、排序不生效的问题。
2. 列表渲染的key值设置错误：循环渲染时将:key绑定为循环的索引值，而非元素本身的唯一标识，在数组顺序发生变动时，Vue会复用错误的DOM节点，进一步放大渲染和数据不同步的问题。

修复实现方案 #

• 调整拖拽组件的绑定数据源：不再让组件直接绑定全量数组，给拖拽区域对应的筛选列表配置带双向拦截的计算属性，保证组件操作的数据源和当前渲染的元素范围完全一一对应。在计算属性的set方法中，把筛选列表的顺序变更映射回全量原始数组，实现拆分列表和全量数组的双向同步。
• 修正列表渲染的key值：把循环的索引key替换为元素本身的唯一值，避免Vue节点复用异常，保证顺序变动时DOM能和数据正确匹配。

修正后的代码示例 #

new Vue({
  el: '#app',
  components: { draggable: window.vuedraggable },
  data: () => {
    return {
      numbers: [1, 2, 3, 4, 5, 6]
    }
  },
  computed: {
    // 带双向同步逻辑的偶数列表计算属性
    evens: {
      get() {
        return this.numbers.filter(number => number % 2 === 0);
      },
      set(newSortedEvenList) {
        let evenCursor = 0;
        // 按照新的偶数顺序，回填到全量数组对应的位置
        this.numbers = this.numbers.map(item => {
          if (item % 2 === 0) {
            return newSortedEvenList[evenCursor++];
          }
          return item;
        })
      }
    },
    odds() {
      return this.numbers.filter(number => number % 2 === 1);
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>

<div id="app">
  <div style="display: flex;">
    <ul style="width: 50%">
      <!-- 拖拽组件直接绑定可双向同步的evens计算属性 -->
      <draggable v-model="evens" draggable="li">
        <transition-group type="transition">
          <!-- key绑定元素本身的唯一值，不再使用循环索引 -->
          <li v-for="number in evens" :key="number">{{ number }}</li>
        </transition-group>
      </draggable>
    </ul>
    <ul>
      <li v-for="number in odds" :key="number">{{ number }}</li>
    </ul>
  </div>
</div>

内容的提问来源于stack exchange，提问作者João