Reactive <v-template> inside a ListView

Version

2.3.0

Reproduction link

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

Platform and OS info

Both

Steps to reproduce

1. Run the sample app.
2. Click on the “Reverse” button
3. See that the first label is reactive but not the labels inside the <v-template> insider the ListView

What is expected?

The labels inside the ListView should be reactive

What is actually happening?

The labels inside the ListView are not reactive

See the screencast:

Implementation details

NS Core reactivity is based on its data binding mechanism, which is usually performed in the bindingContext. The NS-vue binding BTW does not make use of this variable, delegating the reactivity to the Vue.js library. This is working in examples like that:

<template>
   ... 
   <Label :text="text" />
   ...
</template>
<script>
export default {
   data: {
      return {
         text: 'Hello world',
      }
   },
   mounted: {
      setTimeout(() => { this.text = 'Bye world' }, 5000);
   }
}
</script>

After 5 seconds, the text Vue data is changed and Vue triggers the logic to know if this change affects to the template, which is the case, and finally calls to the setAttribute('text', 'Bye world') (see implementation), which does the trick changing the NativeScript component attribute.

The problem appears when we change an attribute referenced inside a <v-template> node in a ListView component.

But, why most of the apps are working ok with the ListView? Because we usually change the elements in the list, which is passed in the items attribute, and we have this hack here for refreshing the list:

watch: {
    items: {
      handler(newVal) {
        this.$refs.listView.setAttribute('items', newVal)
        this.refresh()
      },
      deep: true
    }
  },

[VladimirAmiorkov]

This should be addressed as soon as possible. From my understanding it is in the plan for the next major release of nativescript-vue. Currently there are many related issues in both ListView and RadListView which source of this behavior.

[farfromrefug]

@msl2000 use an ObservableArray and update items as they get selected/unselected. This is what i do and it is very performant!