From 77a575c6c38ee8777560805b241dcc4740c6dfae Mon Sep 17 00:00:00 2001
From: Christian Schramm <christian.schramm@nmsprime.com>
Date: Thu, 11 Aug 2022 20:52:33 +0200
Subject: [PATCH] Add a more complex example to README

* Improve Docs to contain the fact that the element and index object can be destructured and custom variable names are possible
---
 README.md | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/README.md b/README.md
index 1efc2b8..763cd9e 100644
--- a/README.md
+++ b/README.md
@@ -110,6 +110,7 @@ The `item` slot should be used to display items of the list. It receives the ele
 </draggable>
 ```
 
+
 ### With footer slot:
 ``` html
 <draggable v-model="myArray" item-key="id">
@@ -197,6 +198,33 @@ to
 </draggable>
 ```
 
+Breaking changes/More complex example:
+  4) When using nested elements or you want to use another name than `element` inside, destructuring is required
+
+From:
+``` html
+<!-- vue 2 version -->
+<draggable v-model="myNestedObject">
+  <div v-for="(item, id) in myNestedObject" :key="item.id">{{id}} - {{item.name}}</div>
+  <draggable v-model="myNestedObject.nested">
+    <div v-for="myVarName in myNestedObject" :key="myVarName.uuid">{{item.name}}: {{myVarName.name}}</div>
+  </draggable>
+</draggable>
+```
+To:
+``` html
+<draggable v-model="myArray" item-key="id">
+  <template #item="{element: item, index:id}">
+    <div>{{id}} - {{item.name}}</div>
+    <draggable v-model="myNestedObject.nested" item-key="uuid">
+      <template #item="{element: myVarName}">
+        <div>{{item.name}}: {{myVarName.name}}</div>
+      </template>
+    </draggable>
+  </template>
+</draggable>
+
+
 ### Props
 #### modelValue
 Type: `Array`<br>