App crashes while using v-if inside the RadListView's template

[tsonevn]

RadListView will crash on scroll, while displaying elements inside the ListView's template dynamically while using v-if.

Which platform(s) does your issue occur on?

Both

Please provide the following version numbers that your issue occurs with:

• nativescript-ui-listview: 7.0.1
• CLI: 6.0.0
• Cross-platform modules: 6.0.0
• Runtime(s): 6.0.0

Please tell us how to recreate the issue in as much detail as possible.

1. Start the application
2. Start scrolling up and down

Workaround

Replace v-if with visibility. For example: v-if="item.isImportant" -> :visibility="item.isImportant ? 'visible' : 'collapsed'"

[msaelices]

I've just reproduced the error. This is a fragment of my traceback:

JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.4.0)} -> ParentNode(CommentNode(nativecomment)) -> ElementNode(nativegridlayout)'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.4.0)} -> RemoveChild(ElementNode(nativegridlayout), CommentNode(nativecomment))'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.4.0)} -> CreateComment()'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.4.0)} -> ParentNode(ElementNode(nativelabel)) -> ElementNode(nativegridlayout)'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.4.0)} -> InsertBefore(ElementNode(nativegridlayout), CommentNode(nativecomment), ElementNode(nativelabel))'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.4.0)} -> ParentNode(ElementNode(nativelabel)) -> ElementNode(nativegridlayout)'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.4.0)} -> RemoveChild(ElementNode(nativegridlayout), ElementNode(nativelabel))'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.4.0)} -> NextSibling(ElementNode(nativelabel)) -> CommentNode(nativecomment)'
JS: '{NSVue (Vue: 2.6.10 | NSVue: 2.4.0)} -> InsertBefore(ElementNode(nativegridlayout), CommentNode(nativecomment), CommentNode(nativecomment))'
JS: [Vue warn]: Error in v-on handler: "Error: Can't insert child, because the reference node has a different parent."
System.err: An uncaught Exception occurred on "main" thread.
System.err: Calling js method onBindViewHolder failed
System.err: Error: Can't insert child, because the reference node has a different parent.
System.err: 
System.err: StackTrace:
System.err:     insertBefore(file:///node_modules/nativescript-vue/dist/index.js:9891:10)
System.err:     at insertBefore(file:///node_modules/nativescript-vue/dist/index.js:10004:36)
System.err:     at insertBefore(file:///node_modules/nativescript-vue/dist/index.js:10170:20)
System.err:     at updateChildren(file:///node_modules/nativescript-vue/dist/index.js:7047:27)
System.err:     at patchVnode(file:///node_modules/nativescript-vue/dist/index.js:7164:28)
System.err:     at patch(file:///node_modules/nativescript-vue/dist/index.js:7327:8)
System.err:     at patchTemplate(file:///node_modules/nativescript-vue/dist/index.js:8523:19)
System.err:     at updateViewTemplate(file:///node_modules/nativescript-ui-listview/vue/component.js:150:40)
System.err:     at onItemLoadingInternal(file:///node_modules/nativescript-ui-listview/vue/component.js:157:21)
System.err:     at invokeWithErrorHandling(file:///node_modules/nativescript-vue/dist/index.js:3364:25)
System.err:     at invoker(file:///node_modules/nativescript-vue/dist/index.js:4030:13)
System.err:     at Observable.notify(file:///node_modules/tns-core-modules/data/observable/observable.js:110:22)
System.err:     at ListViewAdapter.onBindViewHolder(file:///node_modules/nativescript-ui-listview/ui-listview.js:172:18)
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1209)

[msaelices]

This PR fixes the issue but I guess there is a better fix for that: https://github.com/nativescript-vue/nativescript-vue/pull/554