Update data-key getter function

Author: tangbc

README.md

@@ -121,11 +121,11 @@ More usages or getting start you can refer to these clearly [examples](https://g
 
 ### Required props
 
-| **             Prop             ** | **Type**  | **Description**                                                                                                                              |
-|------------------|---------------|---------------------------------------------------------------------------------------------------------------------------------------------------|
-| `data-key`       | String\|Function        | The unique key get from `data-sources` in each data object, or generated by the attributes in each data object of `data-sources`. Its value **must be unique** in `data-sources`, it is used for identifying item size. |
-| `data-sources`   | Array[Object] | The source array built for list, each array data must be an object and has an unique key for `data-key` property.                                 |
-| `data-component` | Component     | The render item component created / declared by vue, and it will use the data object in `datas-sources` as render prop and named: `source`.       |
+| **             Prop             ** | **Type**  | **Description**                                                               |
+|------------------|------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `data-key`       | String\|Function | The unique key get from `data-sources` in each data object. Or a function called with each `data-source` and return their unique key. Its value **must be unique** in `data-sources`, it is used for identifying item size. |
+| `data-sources`   | Array[Object]    | The source array built for list, each array data must be an object and has an unique key get or generate for `data-key` property.                                                                                           |
+| `data-component` | Component        | The render item component created / declared by vue, and it will use the data object in `data-sources` as render prop and named: `source`.                                                                                  |
 
 ### Optional props
 
@@ -134,7 +134,7 @@ More usages or getting start you can refer to these clearly [examples](https://g
   <p></p>
   <table>
     <tr>
-      <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Props&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
+      <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Prop&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
       <th>Type</th>
       <th>Default</th>
       <th>Description</th>
@@ -155,7 +155,7 @@ More usages or getting start you can refer to these clearly [examples](https://g
       <td><code>estimate-size</code></td>
       <td>Number</td>
       <td>50</td>
-      <td>The estimate size of each item, if it is closer to the average size, the scrollbar length looks more accurately. It is recommended to assign the average that calculate by yourself.</td>
+      <td>The estimate size of each item, if it is closer to the average size, the scrollbar length looks more accurately. It is <strong>recommended</strong> to assign the average that calculate by yourself.</td>
     </tr>
   </table>
 </details>
@@ -165,7 +165,7 @@ More usages or getting start you can refer to these clearly [examples](https://g
   <p></p>
   <table>
     <tr>
-      <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Props&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
+      <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Prop&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
       <th>Type</th>
       <th>Default</th>
       <th>Description</th>
@@ -278,6 +278,12 @@ More usages or getting start you can refer to these clearly [examples](https://g
       <td>{}</td>
       <td>Item wrapper element inline style.</td>
     </tr>
+    <tr>
+      <td><code>item-scoped-slots</code></td>
+      <td>Object</td>
+      <td>{}</td>
+      <td>The <code>$scopedSlots</code> for item component.</td>
+    </tr>
     <tr>
       <td><code>header-tag</code></td>
       <td>String</td>
@@ -314,12 +320,6 @@ More usages or getting start you can refer to these clearly [examples](https://g
       <td>{}</td>
       <td>For using using footer slot, footer slot wrapper element inline style.</td>
     </tr>
-    <tr>
-      <td><code>item-scoped-slots</code></td>
-      <td>Object</td>
-      <td>{}</td>
-      <td>The <code>$scopedSlots</code> for item component</td>
-    </tr>
   </table>
 </details>
 

src/index.js

@@ -205,9 +205,8 @@ const VirtualList = Vue.component('virtual-list', {
     },
 
     getUniqueIdFromDataSources () {
-      return this.dataSources.map((dataSource) => {
-        return typeof this.dataKey === 'function' ? this.dataKey(dataSource) : dataSource[this.dataKey]
-      })
+      const { dataKey } = this
+      return this.dataSources.map((dataSource) => typeof dataKey === 'function' ? dataKey(dataSource) : dataSource[dataKey])
     },
 
     // event called when each item mounted or size changed
@@ -270,9 +269,8 @@ const VirtualList = Vue.component('virtual-list', {
         const dataSource = dataSources[index]
         if (dataSource) {
           const uniqueKey = typeof dataKey === 'function' ? dataKey(dataSource) : dataSource[dataKey]
-          if (uniqueKey) {
+          if (typeof uniqueKey === 'string' || typeof uniqueKey === 'number') {
             slots.push(h(Item, {
-              // key: dataSource[dataKey],
               props: {
                 index,
                 tag: itemTag,