Managing component state in NativeScript-Vue ListView

Question

I am having problems with managing component state in NativeScript-Vue ListView. I am having the exact same problem explained in the following article : https://www.nativescript.org/blog/managing-component-state-in-nativescript-listview. The article does not explains the solution for Nativescript-Vue. I am using Switch components in my ListView to keep the list items state if they are selected or not, but no way. Is there anyone faced the same problem and applied the solution in the article for NativeScript-Vue?

Mennolp Mennolp · Accepted Answer · 2019-08-20T11:23:31

It's actually pretty easy to fix. Since a listview reuses components we shouldn't set data inside the component itself. What we should do is add/change the data inside the object in the array so the listview can properly update the items.

You can add a event that triggers on the parent to update the list on switch changed do this via a tap since the switch on changed event will get triggered by every rerender/reuse of component in listview. This is a bit hard to manage but does work.

<Template>
  <StackLayout @tap="onSwitchTapped" orientation="horizontal">
     <Switch :isUserInteractionEnabled="false" v-model="item.isActive"/>
  </StackLayout>
</Template>
<Script>
   export default {
      props: {
           item: null,
           onItemUpdated: null
      }
      methods: {
         onSwitchTapped()
         {
             this.item.isActive = !this.item.isActive;
             if(onItemUpdated != null)
                onItemUpdated(this.item);
         }
      }
   }
</Script>

<Template>
    <ListView for="item in array">
        <component :item="item" :onItemUpdated="onItemUpdated"/>
    </ListView>
</Template>

<Script>
   export default {
       onItemUpdated(item) {
          this.array[item.index] = item;
       }
   }
</Script>

You can also remove the switch and add a itemTap on the listview and then setting the data in the list:

<ListView for="item in array" @itemTap="itemTapped">

itemTapped(evt) {
    this.array[evt.index].VARIABLE = true/false;
}

Managing component state in NativeScript-Vue ListView

1 Answers