vuedraggable works with :list, not v-model with Vue3 composition API

Viewed 184

I have this Vue3 component using composition API:

<script setup lang="ts">
import { reactive } from "vue";
import draggable from "vuedraggable"
const myArray = reactive([
    { name : "AAA", id : 1},
    { name : "BBB", id : 2},
    { name : "CCC", id : 3},
    { name : "DDD", id : 4}
])
</script>

<template>
  <draggable
    :list="myArray"
    @end="endDrag"
    item-key="id">
    <template #item="{element}">
        <div>{{element.name}}</div>
    </template>
  </draggable>
</template>

This works and in endDrag routine I see myArray rearranged. But if I change :list to v-model the list on screen does not change and the dragged element returns to its original place. Not to say that myArray is not changed.

Bug or feature? I'm doing anything wrong? Thanks for enlightening me!

0 Answers
Related