bug: potential item duplication

xiaoxuwei12345 commented 2 weeks ago

Affected Packages

[ ] @yeger/eslint-config
[x] @yeger/vue-masonry-wall
[x] @yeger/vue2-masonry-wall
[ ] vecti

Description

Hello! Thank you very much for your help recently. Now I have found a serious bug (please forgive me if I used it incorrectly).

On mobile devices, if the Dimensions Responsive screen width is less than or equal to 449px, the server initially renders ssr-columns to 3 and max-columns to 3. When maxColumns is dynamically modified to 1 in js(Only modify maxColumns, not ssrColumns), each item will become repeated (that is, each item will be displayed twice). However, when the Dimensions Responsive screen width is greater than 449px, the above problem will not occur. You should be able to reproduce this error in Chrome's development environment.

Looking forward to your reply, thank you very much!

Additional context

No response

Preferences

[ ] I want to be assigned to and work on this issue myself

DerYeger commented 2 weeks ago

Please create a minimal reproduction, otherwise I'm not able to investigate any issues.

xiaoxuwei12345 commented 2 weeks ago

Thanks for your reply! I don't have experience in creating a reproduction project on GitHub. Do I need to create a complete project (including pages and other directories, package.json, nuxt.config.ts.....)? Or do I only need to provide a test.vue file?

DerYeger commented 2 weeks ago

You don't need to create a full project (or even GitHub repository). Instead, you can use a tool like StackBlitz and

add any required dependencies
create a minimal implementation to reproduce the issue
share the link.

See https://stackblitz.com/edit/vue3-vite-starter?file=README.md.

xiaoxuwei12345 commented 2 weeks ago

https://stackblitz.com/edit/github-9hzuns-e52kfj?file=pages%2Findex.vue

Thank you very much! This is share link。For your convenience, I have also attached screenshots. Thank you! reproduction

DerYeger commented 2 weeks ago

Thank you for the reproduction! I was able to narrow it down to a race condition that happened tue to simoultaneous redraws caused by both your onMounted and the component's onMounted hooks.

v5.0.15 (for Vue 3) and v5.0.16 (for Vue 2) should fix the issue.

DerYeger / yeger