vue.js似乎正在恢复我的列表排序

Question

我正在尝试在vue.js组件中重新订购列表。完成DragnDrop之后，列表的顺序有些 wonky ，并且不再匹配执行API调用或使用Chrome vue.js Extension时可以看到的数据的实际顺序。但是，结尾console.log确实以所需的顺序显示数据。

以下是使用rubaxa/andable lib的代码。

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">