Nativescript-vue: Consecutive `v-if` stop reactive properties

[Tronix117]

Whenever in the same hierarchy, there are multiple v-if, and a v-if become true, all reactive properties stop working altogether. This means all Vue reactive properties does not work anymore in the entire app, even if the page is destroyed. The only way is to reload the app.

As a workaround:v-if along v-else-if or v-else are not affected, v-show is also not affected.

The bug has been reproduced by @rigor789 .

---

This causes the issue:

Page
  StackLayout
    Label(
      v-if="foo"
      text="Enable"
      @tap="foo = false"
    )

    Label(
      v-if="!foo"
      text="Disable"
      @tap="foo = true"
    )

However this is working:

Page
  StackLayout
    Label(
      v-if="foo"
      text="Enable"
      @tap="foo = false"
    )

    Label(
      v-else
      text="Disable"
      @tap="foo = true"
    )

And this is also working:

Page
  StackLayout
    Label(
      v-show="foo"
      text="Enable"
      @tap="foo = false"
    )

    Label(
      v-show="!foo"
      text="Disable"
      @tap="foo = true"
    )

[rigor789]

Update: Looks like the difference between the working/non-working example (in terms of the render function) is that the working v-if/v-else code generates a render function like so:

[
 (foo) ? _c(Enable) : _c(Disable)
]

(shortened here), while the consecutive v-if version generates

[
  (foo) ? _c(Enable) : _e(),
  (!foo) ? _c(Disable) : _e(),
]

_e() creates an empty VNode, which is represented as a CommentNode (or TextNode - can't remember).

The issue lies in the logic of insertBefore which tries to insert before the empty VNode.

I need to re-visit the whole renderer - which will take some time, but at least the cause is now known!

[msaelices]

@rigor789 I'm not sure if the fix is completely working. Sometimes if you remove and add a vnode from the tree the order change!

[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.