diff --git a/packages/integrations/useSortable/index.ts b/packages/integrations/useSortable/index.ts index 36039395028..a9f9e6bb0b2 100644 --- a/packages/integrations/useSortable/index.ts +++ b/packages/integrations/useSortable/index.ts @@ -1,7 +1,7 @@ import { defaultDocument, toValue, tryOnMounted, tryOnScopeDispose, unrefElement } from '@vueuse/core' import type { ConfigurableDocument, MaybeRefOrGetter } from '@vueuse/core' import Sortable, { type Options } from 'sortablejs' -import { nextTick } from 'vue-demi' +import { isRef, nextTick } from 'vue-demi' export interface UseSortableReturn { /** @@ -77,9 +77,17 @@ export function moveArrayElement( from: number, to: number, ): void { - const array = toValue(list) + const _valueIsRef = isRef(list) + // When the list is a ref, make a shallow copy of it to avoid repeatedly triggering side effects when moving elements + const array = _valueIsRef ? [...toValue(list)] : toValue(list) + if (to >= 0 && to < array.length) { const element = array.splice(from, 1)[0] - nextTick(() => array.splice(to, 0, element)) + nextTick(() => { + array.splice(to, 0, element) + // When list is ref, assign array to list.value + if (_valueIsRef) + list.value = array + }) } }