Only last item visible

[karatekaneen]

First of all, thank you for the work you're doing. Really appreciate it.

Anyhow, when updating to the new version and trying to change over to dynamicScroller I get it to scroll smoothly but only the last item (or at least I think it's the last one) is visible. So obviously I'm missing something but I can't find what it is. Worth mentioning is that when I'm scrolling down really fast I can see glimpses of the items but when I scroll back up they're not there anymore.

Here's my implementation:

<DynamicScroller
style="height: 75vh"
:items="dataToDisplay" 
:min-item-height="200">
    <template slot-scope="{ item, index, active }">
        <DynamicScrollerItem
        :item="item"
        :active="active"
        :data-index="index">

            <v-card
            style="margin: 10px 0px;"
            class="rw-card card-hover">
            <v-card-actions
             style="float: right;">
                <v-spacer/>
                <v-btn icon flat color="error" @click="exclude(item)">
                    <v-icon>close</v-icon>
                </v-btn>
             </v-card-actions>
                     <!--- .... all the card content here... -->
             </v-card>
        </DynamicScrollerItem>
    </template>
</DynamicScroller>

And importing the components as:

import { DynamicScroller } from 'vue-virtual-scroller'
import { DynamicScrollerItem } from 'vue-virtual-scroller'

export default {
      props: ["input"],
      components:{
          DynamicScroller: DynamicScroller,
          DynamicScrollerItem: DynamicScrollerItem
      },

Anyone got an idea of what I'm doing wrong?

Addon 1: After further investigation it seems like it's rendering but outside of the viewport. So if i set height: 50% on the scroller i can scroll down and get one element showed and if using pagemode and then scrolling on the page I can scroll down and see everything but one element at the time, so somehow only one item is active.

[levine404]

I'm having the same exact issue!

[petersutter]

me too, and I'm using the RecycleScroller

[namotco]

Also having this issue, but only shows the 1st element.

[amatakasap]

keyField (default: 'id'): field used to identify items and optimize render views management.

The "key" of your item

<dynamic-scroller :items="items" :min-item-height="100" :key-field="key"> </dynamic-scroller

[guushamann]

an example that works after reading the comment of amatakasap, you have to set :key-field example

[radireddy]

I am having the same issue with RecycleScroller.

<template>
<recycle-scroller class="scroller" :items="items" :item-height="240" key-field="ID">
      <div slot-scope="{ item, index }" class="card">
        <div class="row">
          <div class="col-8">
            <div class="pos-relative">
              <h3>{{item.DisplayName}} {{index}}</h3>
            </div>
          </div>
        </div>
      </div>
    </recycle-scroller>
</template>

<script>
import { mapState } from 'vuex';
import { RecycleScroller } from 'vue-virtual-scroller';

export default {

  components: {
    'recycle-scroller': RecycleScroller,
  },

  computed: mapState({
    items: state => state.items.items,
  }),
};
</script>

<style>
.scroller {
  height: 100%;
}

.card {
  height: 240%;
}
</style>

[BloodSucker123]

Hope some knows how to fix this issue, cause even though I use the example code whitch is from the doc-src, about  RecycleScroller and it shows no list of items, but the example usage only shows 1 item. Can someone pinpoint what this issue caused? also the key-field="ID" that is being mentioned is not working.

I got it working with my current build. vue -> 2.6.2 vue-virtual-scroller -> 1.0.0-beta.2 Note: Don't use 1.0.0-beta.4 because it has glitch.

It is in the element which need to set the fixed height of .scroller. In my case setting the height of .scoller { height: 500px; overflow: auto; } then also wrapped it with other element which is has a height of height: 200px;

[dmitriykorobkov]

Same issue on both, RecycleScroller and DynamicScroller

[BloodSucker123]

You have to work with the height of the wrapper

[ShoshinNikita]

I had the same issue. I fixed it by adding field id into objects

Before:

items = [
  { test: 1, help: 3 },
  { test: 2, help: 4 },
  { test: 3, help: 5 },
  { test: 4, help: 6 },
  { test: 5, help: 7 },
  { test: 6, help: 8 }
]

After:

items = [
  { id: 0, test: 1, help: 3 },
  { id: 1, test: 2, help: 4 },
  { id: 2, test: 3, help: 5 },
  { id: 3, test: 4, help: 6 },
  { id: 4, test: 5, help: 7 },
  { id: 5, test: 6, help: 8 }
]

[caweidmann]

Adding id also worked for me. Thanks!

[varadekd]

I am still facing the same issue

[legolaserea]

You need set unique identification for your each 'item', just like the 'key' in Vue's 'v-for'. The key-field default is 'id' , which refer to your item's id property, You can also set other identification in your item as the 'key' , only need to set the key-filed refer to it.

[iamvitali]

Is there a way to just use the index as a :key-field? My data doesn't always have unique data points like a primary key, but obviously every row is unique... So essentially using the key/index would be ideal.

[bhargavr445]

an example that works after reading the comment of amatakasap, you have to set :key-field example

Thanks for the link, but when I add page mode to your component it is not rendering all the elements as expected

[JasonBai007]

I had the same issue. I fixed it by adding field id into objects

Before:

items = [
  { test: 1, help: 3 },
  { test: 2, help: 4 },
  { test: 3, help: 5 },
  { test: 4, help: 6 },
  { test: 5, help: 7 },
  { test: 6, help: 8 }
]

After:

items = [
  { id: 0, test: 1, help: 3 },
  { id: 1, test: 2, help: 4 },
  { id: 2, test: 3, help: 5 },
  { id: 3, test: 4, help: 6 },
  { id: 4, test: 5, help: 7 },
  { id: 5, test: 6, help: 8 }
]

solved my problem.