itemKey for scoped slots, perf notes in Readme

README.md

@@ -127,6 +127,8 @@ There are additional props you can use:
 - `typeField` to customize which field is used on the items to get their type and use the corresponding definition in the `renderers` map. The default is `'type'`.
 - `keyField` to customize which field is used on the items to set their `key` special attribute (see [the documation](https://vuejs.org/v2/api/#key)). The default is `'id'`.
 
+**For better performance, you should use the `keyField` prop that whill set the `key` attribute. Warning! You shouldn't expect items to have the key set at all times, since the scroller may disable them depending on the situation.**
+
 ## Scoped slots
 
 Alternatively, you can use [scoped slots](https://vuejs.org/v2/guide/components.html#Scoped-Slots) instead of `renderers`. This is active when you don't define the `renderers` prop on the virtual scroller.
@@ -138,13 +140,13 @@ Here is an example:
 ```html
 <virtual-scroller class="scroller" :items="items" item-height="42" content-tag="table">
   <template scope="props">
-    <tr v-if="props.item.type === 'letter'" class="letter">
+    <tr v-if="props.item.type === 'letter'" class="letter" :key="props.itemKey">
       <td>
         {{props.item.value}} Scoped
       </td>
     </tr>
 
-    <tr v-if="props.item.type === 'person'" class="person">
+    <tr v-if="props.item.type === 'person'" class="person" :key="props.itemKey">
       <td>
         {{props.item.value.name}}
       </td>
@@ -153,6 +155,8 @@ Here is an example:
 </virtual-scroller>
 ```
 
+**For better performance, you should set the `key` attribute on direct children using the `itemKey` field from the scoped slot and set the `keyField` prop on the virtual scroller.**
+
 ## Page mode
 
 The page mode expand the virtual-scroller and use the page viewport to compute which items are visible. That way, you can use it in a big page with HTML elements before or after (like a header and a footer). Just set the `page-mode` props to `true`:

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-virtual-scroller",
   "description": "Smooth scrolling for any amount of data",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "author": {
     "name": "Guillaume Chau",
     "email": "[email protected]"

src/components/VirtualScroller.vue

@@ -6,7 +6,7 @@
           <component class="item" v-for="item in visibleItems" :key="keysEnabled && item[keyField]" :is="renderers[item[typeField]]" :item="item"></component>
         </template>
         <template v-else>
-          <slot class="item" v-for="item in visibleItems" :item="item"></slot>
+          <slot class="item" v-for="item in visibleItems" :item="item" :item-key="keysEnabled && item[keyField]"></slot>
         </template>
       </component>
     </component>