Vue.js 似乎要恢复我的列表排序

Question

我正在尝试重新排序 vue.js 组件中的列表。在我完成拖放后，列表的顺序变得有点 wonky 并且不再匹配执行 api 调用时或当使用 chrome vue.js 扩展名。但是结尾 console.log 确实以所需的顺序显示数据。

下面是使用 RubaXa/Sortable 库的代码。

export default {
  watch: {
    workout() {
      let list = this.workout.exercises
      Sortable.create(document.getElementById("exercises"), {
        onUpdate: e => {
          list.splice(e.newIndex, 0, list.splice(e.oldIndex, 1)[0])
          console.log(list.map(e => { console.log(e.details) }))
        }
      })
    }
  }
}

Answer 1

顺序混乱的原因是我忘记绑定 key。

<li v-for="item in items" :key="item.id">

Vue.js 似乎要恢复我的列表排序

Vue.js seems to be reverting my list sort

javascript

vue.js

rubaxa-sortable