Version

2.0.2

Reproduction link

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

Platform and OS info

emulator Android 9 / NativeScript 4.2.4 / Windows 7

Steps to reproduce

The error is reproduced in the example, just tap Switch

What is expected?

v-model works for Label in ListView

What is actually happening?

not works

If we do static elements, model works
Example:
<GridLayout class="w-full" rows="*,*" columns="100"> <Label col="0" row="0" class="h4 m-0 text-center" :class="switchEnabled ? 'p-t-2' : 'p-t-8'" :text="switchEnabled ? 'On' : 'Off'" /> <Switch class="switch" row="1" col="0" v-model="switchEnabled" horizontalAlignment="center"/> </GridLayout> ... data () { return { switchEnabled: false } }...

When we change Switch, text in Label changes from Off to On.

When we create switch using ListView with dynamic data - model doesn’t work. Text in Label is not changing.
Example:
<ListView for="(item, index) in [1,2,3]" separatorColor="transparent"> <v-template> <StackLayout> <GridLayout class="w-full" rows="*,*" columns="100" row="0" col="0"> <Label col="0" row="0" class="h4 m-0 text-center" v-bind:key="'item_' index" :id="'item_' index" :class="switchEnabled[index] ? 'p-t-2' : 'p-t-8'" :text="switchEnabled[index] ? 'On' : 'Off'" /> <Switch class="switch" row="1" col="0" v-bind:key="'switch_' index" :id="'switch_' index" v-model="switchEnabled[index]" horizontalAlignment="center"/> </GridLayout> </StackLayout> </v-template> </ListView> ... data () { return { switchEnabled: [false, true, false] } }...
When we create list, text in Label corresponds to the model,. But when we select Switch, text in Label is not changed from Off to On.

If we add into Switch function checkedChange, than text in Label behave strange
Example:
<ListView for="(item, index) in [1,2,3]" separatorColor="transparent" ref="itemswitch"> <v-template> <StackLayout> <GridLayout class="w-full" rows="*,*" columns="100" row="0" col="0"> <Label col="0" row="0" class="h4 m-0 text-center" v-bind:key="'item_' index" :id="'item_' index" :class="switchEnabled[index] ? 'p-t-2' : 'p-t-8'" :text="switchEnabled[index] ? 'On' : 'Off'" /> <Switch class="switch" row="1" col="0" v-bind:key="'switch_' index" :id="'switch_' index" v-model="switchEnabled[index]" @checkedChange="onSwitchChanged(index)" horizontalAlignment="center"/> </GridLayout> </StackLayout> </v-template> </ListView> ... data () { return { switchEnabled: [false, true, false] } }, methods: { onSwitchChanged: function (index){ let item = this.$refs.itemswitch.nativeView let label = item.getViewById('item_' index) label.text = this.switchEnabled[index] ? '222' : '111' } }...
According to function, when we select Switch text in Label should be '222' or '111', but text is changing to 'On' and 'Off'