Vue Slicksort

Appearance

Return to top
On this page

Migrating from 1.x

Slicksort Version 2 is an overhaul of Version 1 with many awaited features, including sorting between lists! It also comes with some breaking changes.

Breaking changes

Vue 3 only

Vue 2 support has been removed for now. We may revisit this later with the vue-demi library. In order to use v2 of vue-slicksort you must upgrade to Vue 3. Apologies for the inconvenience!

V-model changes

With the transition to Vue 3, we chose to use named v-model. Anywhere you used v-model in V1, must become v-model:list.

Before:

<SlickList v-model="list"> ... </SlickList>

After:

<SlickList v-model:list="list"> ... </SlickList>

This was done to make the emitted events more explicit, so if you were using the expanded v-model syntax, the props/events have changed from :value and @input to :list and @update:list.

Before:

<SlickList :value="list" @input="onUpdateList"> ... </SlickList>

After:

<SlickList :list="list" @update:list="onUpdateList"> ... </SlickList>

collection Removed

The collection prop has been removed from the Element. This props purpose has been replaced by the group prop on the Container, which can allow/prevent dragging between lists. This means that any list with elements of different collections should be refactored to be a set of lists with different groups. This is a simple example of the transition.

Before

html
<template>
  <SortableList>
    <SortableItem v-for="(item, i) in listA" collection="list-A" />
    <SortableItem v-for="(item, i) in listB" collection="list-B" />
    <SortableItem v-for="(item, i) in listC" collection="list-C" />
  </SortableList>
</template>

After

html
<template>
  <SortableList group="list-A">
    <SortableItem v-for="(item, i) in listA" />
  </SortableList>
  <SortableList group="list-B">
    <SortableItem v-for="(item, i) in listB" />
  </SortableList>
  <SortableList group="list-C">
    <SortableItem v-for="(item, i) in listC" />
  </SortableList>
</template>