Akryum / Akryum/vue-virtual-scroller

Content of new node being replaced by existing node

未關閉
#810 1 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視
bug
主要語言
TypeScript
星號
10.8k
分支
973
PR 合併指標
30 天內沒有已合併 PR

描述

### Describe the bug

Hi all,

I have a weird situation whereby when I add a new message/nodes to the end of my array the content showing is actually the content of another message somewhere else in the stack and not the message that I sent. However I can see in dev tools that the content of the latest node is correct.

I am assuming this is down to the virtualisation side, of which Im not too familiar, so probably something relatively simple to fix given the correct knowledge.

https://github.com/Akryum/vue-virtual-scroller/assets/12802934/8713b3ad-c98f-4dca-8f9b-ed71088d52bd

### Reproduction

Heres the code as it stands. im using tailwind so you can see all styles applied:

```







```

Here is the code that updates messages:

```
onMounted(async () => {
const channels = await streamChatInstance.queryChannels({id: props.stage.id}, [{last_updated: -1}], {
watch: false,
});
streamChatChannel.value = channels[0];
await streamChatChannel.value.watch();
messages.value = streamChatChannel.value.state.messageSets[0].messages

streamChatChannel.value.on('message.new', (event) => {
scroller.value.scrollToBottom()
messages.value = streamChatChannel.value.state.messageSets[0].messages
scroller.value.forceUpdate();

})

streamChatChannel.value.on('message.updated', (event) => {
messages.value = streamChatChannel.value.state.messageSets[0].messages
scroller.value.forceUpdate();
})
})
```

### System Info

```shell
N/A
```

### Used Package Manager

npm

### Validations

- [X] Read the [docs](https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/README.md).
- [X] Check that there isn't [already an issue](https://github.com/Akryum/vue-virtual-scroller/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/Akryum/vue-virtual-scroller/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

貢獻指南

這個儲存庫沒有索引到貢獻指南

評估

這個 Issue 還沒有評估資料。

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。