Akryum / vue-virtual-scroller

⚡️ Blazing fast scrolling for any amount of data
https://vue-virtual-scroller-demo.netlify.app
9.47k stars 901 forks source link

When items are instances of a class where the keyField is defined as a getter, getting `id` using the the `keyField` throws and error. #770

Closed shreymahendru closed 1 year ago

shreymahendru commented 1 year ago

Describe the bug

Error from DynamicScrollerItem.vue: keyField 'id' not found in your item. You should set a valid keyField prop on your Scroller

https://github.com/Akryum/vue-virtual-scroller/blob/1c76ec6dccbea7d602d38a0c8e795dc8ce5f36af/packages/vue-virtual-scroller/src/components/DynamicScrollerItem.vue#L55

Cause: This is happening because the check for the existence of the keyField in the item uses hasOwnProperty which only looks at the Object's own properties and not all the way down the prototype chain.

Proposed solution: if ( this.vscrollData.keyField in this.item ) return this.item[this.vscrollData.keyField]

in checks the object's own and inherited properties.

This was a breaking change since v1.0.10

Reproduction

<template>
  <DynamicScroller
    :items="items"
    class="scroller"
  >
    <template v-slot="{ item, index, active }">
      <DynamicScrollerItem
        :item="item"
        :active="active"
        :data-index="index"
      >
        <div>
          {{item.name}}
        </div>
      </DynamicScrollerItem>
    </template>
  </DynamicScroller>
</template>

<script>
class Person 
{
  #id;
  #name;

  get id()  {  return this.#id;  }
  get name()  {  return this.#name;  }

  constructor(id, name) 
  {
     this.#id = id;
     this.#name = name;
  }
}

const persons = [new Person("1", "a"), new Person("2", "b"), new Person("3", "c")]

export default  {
 data: {
    persons
 }
}
</script>

System Info

System:
    OS: macOS 13.0.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 1.01 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 3.3.0 - /usr/local/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
  Browsers:
    Chrome: 107.0.5304.110
    Firefox: 106.0.1
    Safari: 16.1
  npmPackages:
    vue-virtual-scroller: ^1.0.10 => 1.1.2

Used Package Manager

yarn

Validations