Skip to content

Commit 220b180

Browse files
committed
v1.0.6
Finish README
1 parent 0422a1a commit 220b180

File tree

3 files changed

+8
-7
lines changed

3 files changed

+8
-7
lines changed

README.md

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ The goal was to have a wrapper that:
1515
* supports Vue 3
1616
* is **light** and easy to maintain
1717
* works as a **directive**, for example to conditionally enable / disable the drag-and-drop feature without having to change the whole component
18-
* doesn't iterates on the data by itself
19-
* doesn't update the underlying data model (more on that later)
18+
* doesn't iterate on the data by itself
19+
* doesn't update the underlying data model (see [Order mutation](#order-mutation))
2020

21-
As a reference, here are the wrappers that I tested:
21+
As a reference, here are other Sortable wrappers:
2222
* [`vuedraggable`](https://www.npmjs.com/package/vuedraggable) only supports Vue 2
2323
* [`vuedraggable@next`](https://www.npmjs.com/package/vuedraggable) supports Vue 3, but adds a lot of overhead on top of Sortable
2424
* [`vue-sortable`](https://www.npmjs.com/package/vue-sortable) is totally outdated (last update is from 2016)
@@ -60,7 +60,7 @@ Install the package:
6060
npm install --save vue3-sortablejs
6161
```
6262

63-
Register the plugin in your `App.vue` file:
63+
Register the plugin in `App.vue`:
6464
```js
6565
import VueSortable from "vue3-sortablejs";
6666

@@ -100,7 +100,7 @@ You can pass an object of options, in order to affect the behavior of the direct
100100

101101
## Events
102102

103-
A custom `ready` event will be triggered as soon as Sortable is registered on the component. You can use it to access the Sortable instance.
103+
A custom `ready` event will be triggered as soon as Sortable is registered on the component. You can use it to access the underlying Sortable instance.
104104
As well, you can listen to any native Sortable event.
105105

106106
* `@ready`: Sortable is ready and attached to the component
@@ -197,6 +197,7 @@ It is highly recommended to set a **key on the children items**, to help Sortabl
197197
```
198198

199199
In the same way, if you use the `group` option, it is highly recommended to set a **key on the parent** itself. Otherwise the DOM managed by Sortable can become out-of-sync with the actual data state. I have noticed this helps a lot when using Sortable with complex components.
200+
200201
The key must be based on the number of items the parent contains. This will force a re-render when an item is added / removed, and make Sortable re-initialize and start from a clean state every time. This may seem a bit hacky, but it's the only way to keep a consistant behavior.
201202

202203
```html

package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue3-sortablejs",
3-
"version": "1.0.5",
3+
"version": "1.0.6",
44
"description": "A directive for Sortable on Vue 3",
55
"author": "Eliott Vincent <dev@eliottvincent.com>",
66
"homepage": "https://github.com/eliottvincent/vue3-sortablejs",

0 commit comments

Comments
 (0)