search

nativescript-community / ui-collectionview

Allows you to easily add a collection view (grid list view) to your projects. Supports vertical and horizontal modes, templating, and more.
Apache License 2.0
59 stars 18 forks source link

Vue: Reactivity breaks when screen is full? #44

Closed MrSnoozles closed 1 year ago

MrSnoozles commented 1 year ago

Hey,

I'm encountering a strange behavior that I could narrow down to the CollectionView: When the full height of the CollectionView is used somehow the reactivity in a NSVue application breaks.

I created an example project (ui-collectionview is not part of the preview app yet, so it won't run there). https://stackblitz.com/edit/nativescript-stackblitz-templates-5gmrga?file=app/components/Home.vue

I have an array of messages that get one new message per second. The messages are being passed to the Messages component, that displays the messages in a CollectionView. As soon as the screen is full the messages to not get updated anymore.

The Messages component also has a <Label :text="messages.length" /> outside of the CollectionView, which does not display the correct length of the messages array after a while. When the CollectionView is removed, everything works as expected.

reactivity

Which platform(s) does your issue occur on?

Please, provide the following version numbers that your issue occurs with:

MrSnoozles commented 1 year ago

Messages were stored in a JavaScript array. When switching to an ObservableArray the problem disappeared.

When the items are going to be dynamic, ObservableArray has to be used, even though Angular or Vue arrays are already reactive. As far as I understood, that reactivity is different and CollectionView is not able to detect it.