MaxLeiter / MaxLeiter/sortablejs-vue3
Unexpected behaviour when not removing from data array
Nobody has claimed this yet.
- Dominant language
- Vue
- Stars
- 413
- Forks
- 27
- PR merge metrics
- No merged PRs in 30d
Description
Hi! Im not very familiar with sortablejs
const baseTasks : Array<{ id: Task['id'] }> = [ {id: '1'}, {id: '2'}, {id: '3'} ]
const taskList : Ref<Array<{id: Task['id'], removed?: boolean}>> = ref([]);
Im using the following add/remove handlers without removing the task from the list
function listOnAdd(event: SortableEvent): void {
const taskId = event.item.getAttribute('task-id');
if (typeof taskId !== 'string') throw new Error('Invalid Task Id!');
event.item.remove();
taskList.value.push({id: taskId});
}
function listOnRemove(event: SortableEvent): void {
const taskId = event.item.getAttribute('task-id');
if (typeof taskId !== 'string') throw new Error('Invalid Task Id!');
const taskIndex = taskList.value.findIndex(i => i.id === taskId);
if (taskIndex === -1) throw new Error('Task not found!');
taskList.value[taskIndex] = {id: taskId, removed: true}; // only mark them as 'removed'
// taskList.value.splice(taskIndex, 1);
}
function listOnReset() {
taskList.value = [...baseTasks];
}
<button @click="listOnReset">reset</button>
<Sortable
ref="sortableElement"
class="task-list"
:list="taskList"
item-key="id"
:options="options"
@add= "listOnAdd"
@remove= "listOnRemove"
>
<template #item="{element}">
<Task :task-id="element.id"/>
</template>
</Sortable>
The elements that are moved between categories, when reset, dont seem to be added again.
https://stackblitz.com/edit/recursive-template-refs-5ip6ao?file=src%2Fcomponents%2FTaskList.vue
Is this correct behaviour? I'm a bit surprised that the elements are not behaving as a clone list
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked StackBlitz reproduction and inspect the Vue component using the Sortable wrapper. Trace the @add and @remove handlers, the taskList updates, and listOnReset behavior. Done means establishing whether reset should restore moved elements when removed items are only marked rather than spliced, and documenting or correcting the observed behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100