Nativescript-vue: reactivity lost after activity reset

[farfromrefug]

Version

2.8.1

Reproduction link

https://github.com/nativescript-community/ui-material-components/tree/master/demo-vue

Platform and OS info

Android

Steps to reproduce

Run the app,
=> Go in the buttons sections
=> the second "text expanded" button expand on tap
=> Switch android dark mode
=> activity reset
=> the second "text expanded" button wont expand on tap anymore

If you change the lines here https://github.com/nativescript-community/ui-material-components/blob/d15980019efd7856b3b41d395d5a44cb2026662b/demo-vue/app/examples/Buttons.vue#L99 so that expanded prop is changed directly on the N object then it works. This makes me thing it is a nvue issue. Maybe vue objects lost their N counterpart in the reset?

What is expected?

reactivity should still be working

What is actually happening?

reactivity is lost

[mono424]

+1 also got reactivity problems in my app; could be related.

[farfromrefug]

@mono424 you ask about your issue (and give more details) on N slack or Discord

[baybal]

Can confirm too.

This is a hard, pretty much a critical blocker. +1 for priority escalation

[MrSnoozles]

I don't know enough about Android development to confirm it's the same issue but since updating to {N}Vue 2.8.1 reactivity in the Vue component directive inside a (non-root) frame stopped working for me.

~html





~

currentStepComponent is a computed property that returns the name of the component for the current step in the dialogue. The Label gets updated correctly, the component does not.
If I try the same with a component outside the Frame it works as expected.

[rigor789]

@MrSnoozles it's odd that it even worked prior, nesting a dynamic component under a frame is undefined behavior.

The only supported behavior is setting the initial/default page by nesting it under a frame, all subseqent navigations should be done using the navigation api's like $navigateTo and $navigateBack: When you need to change the current step, just this.$navigateTo(NextStep) or if you need to go back to the previous step this.$navigateBack(). To know which step the frame is currently on - you could use nativescript-vue-navigator which does it by tracking a "path".

just to clarify why it's undefined behavior:
The main issue, why it's undefined behavior is that when you change a dynamic component - should it always navigate forward, or if you change it to a component that was already in there - should it navigate back to it? Should it clearHistory? Should it set backstackVisible? By rendering the step dynamically you can't change these - if the component re-renders it would navigate to it again - and you'd end up with a backstack with duplicates and just weird UX.