Add index to scoped props available in RecycleList (#54)

* Added the item's index in the list as a scoped property for RecycleList slots

* Adjusted demo page to show usage of the index scoped property

* Added new index scoped prop to readme

Author: tibineagu

README.md

@@ -358,6 +358,7 @@ It's very similar to virtual-scroller, but:
 - Recycles scoped slot content (including components) in the list (no destroyed components), depending on item types (customize with `typeField` prop)
 - The components used in the list should expect `item` prop change without being re-created (use computed props or watchers to properly react to props changes!)
 - You don't need to set `key` on list content (but you should on `<img>` elements)
+- To emulate conditions that would otherwise be available in a `v-for` loop, the scoped slot exposes an `index` prop that reflects each item's position in the `items` array
 
 Both fixed and dynamic height modes are supported (set `itemHeight` prop for fixed height mode).
 
@@ -367,7 +368,7 @@ Both fixed and dynamic height modes are supported (set `itemHeight` prop for fix
   :items="items"
 >
   <!-- For each item -->
-  <template slot-scope="{ item }">
+  <template slot-scope="{ item, index }">
     <!-- Reactive dynamic height -->
     <div
       v-if="item.type === 'letter'"
@@ -381,6 +382,7 @@ Both fixed and dynamic height modes are supported (set `itemHeight` prop for fix
     <MyPersonComponent
       v-else-if="item.type === 'person'"
       :data="item.value"
+      :index="index"
     />
   </template>
 </recycle-list>

docs-src/src/App.vue

@@ -89,13 +89,13 @@
                 @click="props.item.height = (props.item.height === 200 ? 300 : 200)"
               >
                 <td class="index">
-                  {{props.item.index}}
+                  {{props.index}}
                 </td>
                 <td class="value">
                   {{props.item.value}} Scoped
                 </td>
               </tr>
-              <item v-if="props.item.type === 'person'" :item="props.item"></item>
+              <item v-if="props.item.type === 'person'" :item="props.item" :index="props.index"></item>
             </template>
           </recycle-list>
         </template>

docs-src/src/Item.vue

@@ -1,7 +1,7 @@
 <template>
   <tr class="person" @click="edit">
     <td class="index">
-      {{item.index}}
+      {{index}}
     </td>
     <td>
       <div class="info">
@@ -18,7 +18,7 @@
 
 <script>
 export default {
-  props: ['item'],
+  props: ['item', 'index'],
 
   created () {
     console.log('created')

src/components/RecycleList.vue

@@ -18,6 +18,7 @@
       >
         <slot
           :item="view.item"
+          :index="view.nr.index"
           :active="view.nr.used"
         />
       </div>