Open
Description
Describe the bug
Hi, I just figured out that my <recycle-scroller :items="items"> does not reactivley updates if I use splice on my reactive items in order to add or remove some elements. My array is provided as const items = ref([]) and I use items.value.splice.
The very same approach for the vue2 version is working fine.
In vue2, an (not deep) array watcher triggers on push, pop and splice, but
in vue3 they have changed/corrected it to only trigger on shallow changes.
@Akryum Do you think you may change your array watcher to a deep watch or are you going to keep it how it is?
Please see the minimal reproduction example.
A re-render only happens for example on resize or if I use the <dynamic-scroller> or if it re-reference the items again..
Reproduction
<template>
<recycle-scroller v-slot="{ item }" class="scroller" :items="items" :item-size="48">
<div>{{ item.id }}</div>
</recycle-scroller>
</template>
<script lang="ts" setup>
/* eslint-disable import/first */
import { Ref, ref, onBeforeMount } from 'vue';
import { RecycleScroller } from 'vue-virtual-scroller';
const items: Ref<{ id: string }[]> = ref([]);
onBeforeMount(() => {
for (let i = 0; i < 2; i += 1) {
items.value.push({ id: `id-${i.toString()}` });
}
window.setInterval(() => {
items.value.push({ id: `id-${items.value.length.toString()}` });
}, 1000);
});
</script>
<style lang="scss" scoped>
.scroller {
width: 100%;
height: 100%;
scrollbar-gutter: stable;
}
</style>
System Info
"vue": "3.3.7"Used Package Manager
npm
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.