Child element order not maintained with v-if

[danny1461]

Version

2.4.0

Reproduction link

https://play.nativescript.org/?template=play-vue&id=2rEhAr

Platform and OS info

Android

Steps to reproduce

When actions are taken to cause a re-render of a page, elements that were previously hidden by v-if are appended to the parent at the wrong location.

What is expected?

Order of the elements from the source code should be preserved even as the data causing the re-renders changes.

What is actually happening?

It appears that a basic remove/append operation is occurring; so elements being brought into existence are appearing at the end of the container instead of where they are in the source template.

---

This is the same minimal production code in Vue for web. Note that the last button remains the last button always.

https://codesandbox.io/s/jovial-bash-fq8by

[rigor789]

I have seen this before, but I can't remember being able to track down the issue. However, there is a workaround that seems to solve it by using v-else-if or v-else: https://play.nativescript.org/?template=play-vue&id=2rEhAr&v=2

This might not be a solution in all cases, but worth giving it a try.

[danny1461]

That definitely does work and helps me move past my current issue in this case. Now the log shows "InsertBefore" for that element and it appears where it should.

[teddysasmita]

StackLayout is not rendering its children in the right order in 2.6.2.

[rigor789]

@teddysasmita mind sharing an example?

Edit: found the issue - have a fix just testing it to make sure everything works!

Edit 2: Fixed in 2.6.3

[teddysasmita]

I am sorry for the late response. Below is the code that I used.
The performance is indeed increase. Thank you so much for all the great works.

Masuk Daftar Sbg Tamu .

[nativescript-vue-bot]

We are locking this issue because it has been closed for more than 14 days.

If the issue comes up again please open a new issue with additional details.