Question

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

以下是使用RubaXa / Sortable 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">

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

1 个答案: