Search code examples
javascriptvue.jsrubaxa-sortable

Vue.js seems to be reverting my list sort

I am trying to re-order a list in vue.js component. After I complete the dragndrop, the order of the list goes a little wonky and no longer matches the actual order of the data that can be seen when performing the api call or when using the chrome vue.js extension. However the ending console.log does show the data in the desired order.

Below is the code that uses the 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) }))
        }
      })
    }
  }
}
Solution

  • The reason the order was getting mixed was that I forgot to bind the key.

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