Multiple Switches in a different 'v-else-if' on the same position break binding.

[BHuys]

Description

I have multiple v-else-if blocks (form-steps) on my template, all have a Switch at the exact same spot with a different binding, when I go to the next form-step, my binding gets overwritten by the new value.

Expected behaviour

Bound Switch values don't get overwritten if I change steps.

Experienced behaviour

Bound Switch values get overwritten if an other v-else-if block gets displayed.

Versions & platform

Platforms: Android & iOS
Nativescript-vue: 2.5.0
Nativescript-core: 6.5.0

Snippet

<GridLayout v-if="currentStep===0" rows="60,*" columns="*">
  <GridLayout row="0" class="formTitle" columns="8*,2*" rows="*">
    <label
      col="0"
      row="0"
      class="title"
      :text="'Heenreis'"
      verticalAlignment="center"
    ></label>
    <Switch
      col="1"
      row="0"
      v-model="departure"
      verticalAlignment="center"
      horizontalAlignment="right"
    />
  </GridLayout>
</GridLayout>
<GridLayout v-else-if="currentStep===1" rows="60,*" columns="*">
  <GridLayout row="0" class="formTitle" columns="8*,2*" rows="*">
    <label
      col="0"
      row="0"
      class="title"
      :text="'Terugreis'"
      verticalAlignment="center"
    ></label>
    <Switch
      col="1"
      row="0"
      v-model="arrival"
      verticalAlignment="center"
      horizontalAlignment="right"
    />
  </GridLayout>
</GridLayout>

The value of "departure" gets overwritten by "arrival" when I go to step 1.

[nativescript-vue-bot]

Your issue has been tagged as low priority because it did not follow our issue guidelines.

If you believe your issue should be higher priority please close this issue and create a new one
using the issue helper.

Thanks for your understanding.

[BHuys]

update

The same occurs with inline properties as margin, alignment etc... I'm using a workaround by using a delay with this.$nextTick to change steps and setting them to null first.

[rigor789]

Fixed up code formatting in your issue.

Try using unique keys on your layouts - that should work too.

I don't know why this happens, but I've seen it before when vue tries to reuse existing elements, and some things break. It's likely a bug in our renderer.

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