Alfred-Skyblue / vue-draggable-plus

Universal Drag-and-Drop Component Supporting both Vue 3 and Vue 2
https://vue-draggable-plus.pages.dev/en/
MIT License
2.74k stars 106 forks source link

v-model variable updated *after* @update event is sent #15

Closed pmorch closed 1 year ago

pmorch commented 1 year ago

If I have:

    <VueDraggable
      v-model="list"
      @update="listUpdate"
    >

I expect to see the updated list in my listUpdate method. But list gets updated after listUpdate is called, forcing me to use a setTimeout(func, 0) or Vue.nextTick(func) hack to see the updated variable. It would be better if the new updated variable was available when @update fires.

So I expect this to show what is now the first element, but in fact it will show the first element before i sorted them:

  methods: {
    listUpdate() {
      this.firstElementInUpdate = this.list[0]
    }
  },

And this will show the new first element as I expect:

  methods: {
    listUpdate() {
      nextTick(() => {
        this.firstElementInUpdate = this.list[0]
      })
    }
  },

See https://vue-pys8h3.stackblitz.io for a full reproduction.

Some other way to get the new value of list from listUpdate would also be good. The sortable doc says to access it as evt.to, but then I get the updated DOM node, where I want the Vue model variable.

This reproduces in 0.1.3 and 0.1.5. 0.1.4 didn't work.

Alfred-Skyblue commented 1 year ago

Hi, I have fixed this issue in 0.1.6, thanks for your feedback.