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

[shreymahendru]

Describe the bug

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

vue-virtual-scroller/packages/vue-virtual-scroller/src/components/DynamicScrollerItem.vue

Line 55 in 1c76ec6

if (this.item.hasOwnProperty(this.vscrollData.keyField)) return this.item[this.vscrollData.keyField]

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

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.