vue-virtual-scroller isn't updating when the data changes

[guanzo]

Demo: https://jsfiddle.net/9cp1qw8z/2/

vue-virtual-scroller isn't updating when my data changes. I know the data is reactive based on the demo.

[GreatAuk]

+1

[mgd216]

I'm having the same problem, I have a list with RecycleScroller that when a user clicks an item in the list it opens a dialog to change the data. When the dialog closes the RecycleScroller does not update the current view until the user scrolls. To fix this I changed the following line:

src/components/RecycleScroller

360: } else {
361: view.nr.used = true
362: view.item = item //added this line
363: }

Now the view updates with the data changed by the user.

[mercs600]

@guanzo @GreatAuk @mgd216 Guys, I thought I have the same issue, but I checked code and noticed that emitUpdate is props then I read documentation and saw:

emitUpdate (default: false): emit a 'update' event each time the virtual scroller content is updated (can impact performance).

So you have to just set the props on your recycle-scroller component

<DynamicScroller
    :emit-update="true">

[GreatAuk]

@guanzo @GreatAuk @mgd216 Guys, I thought I have the same issue, but I checked code and noticed that emitUpdate is props then I read documentation and saw:

emitUpdate (default: false): emit a 'update' event each time the virtual scroller content is updated (can impact performance).

So you have to just set the props on your recycle-scroller component

<DynamicScroller
    :emit-update="true">

I will try, thanks😁

[jrast]

I also encounter this problem, however, I'm not shure if its exactly the same. My example looks like this:

<template>
<v-app>
  <v-content>
    <v-container fluid>
      <recycle-scroller page-mode :items="citems" :item-height="48" content-tag="v-list" class="scroller">
        <v-list-tile slot-scope="{ item }" class="person-tile" tag="div">
          <v-list-tile-action>
            <text-icon colorize>{{ item.id }}</text-icon>
          </v-list-tile-action>

          <v-layout class="person-info" align-center>
            <v-flex xs12 sm8 md5 class="person-primary">
              {{ item.value }} - {{ item.test }}
            </v-flex>
          </v-layout>

          <v-btn icon @click.stop="increment(item.id)" href="#">
            <v-icon>edit</v-icon>
          </v-btn>
        </v-list-tile>


      </recycle-scroller>
    </v-container>
  </v-content>
</v-app>
</template>

<script>


export default {
  name: 'Demo',
  props: {},
  data() {
    return {
      items: [
        { id: 1, value: 0 },
        { id: 2, value: 0 },
        { id: 3, value: 0 },
      ],
    }
  },
  computed: {
    citems() {
      return this.items.map(e => ({ ...e, test: 1 }))
    },
  },
  methods: {
    increment(id) {
      const idx = this.items.findIndex(e => e.id === id)
      console.log(`Increment element ${idx}: ${this.items[idx].value} --> ${this.items[idx].value + 1}`)
      const elem = this.items[idx]
      elem.value++
      this.$set(this.items, idx, elem)
    },
  },
}
</script>

<style lang="stylus">

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

Note that citems (the computed items) are used in the virtual scroller. If I change this line and use the items directly it seems to work!

[jrast]

I'm having the same problem, I have a list with RecycleScroller that when a user clicks an item in the list it opens a dialog to change the data. When the dialog closes the RecycleScroller does not update the current view until the user scrolls. To fix this I changed the following line:

src/components/RecycleScroller

360: } else {
361: view.nr.used = true
362: view.item = item //added this line
363: }

Now the view updates with the data changed by the user.

I can confirm that this solution works!