Error in nextTick: "Error: Can't insert child, because the reference node has a different parent.

Version

2.4.0

Reproduction link

https://play.nativescript.org/?template=play-vue&id=08ozhM&v=27

Platform and OS info

CLI: 6.1.2, Cross-platform modules: 6.1.2, Android Runtime: 6.1.2, iOS Runtime: 6.1.1, Plugin(s): nativescript-vue 2.4.0, nativescript-material-ripple 2.4.2

Steps to reproduce

RadListView implementation:

<RadListView id="songs-alphabet-order-list" ref="songsAlphabetOrderList" for="song in songsAlphabetOrder" @itemTap="onNavigationAlphabetItemTap">
  <v-template name="header">
    <StackLayout>
      <FlexboxLayout>
        <Label .../>
      </FlexboxLayout>
    </StackLayout>
  </v-template>
  <v-template>
    <list-item :song="song"/>
  </v-template>
  <v-template name="footer">
    <FlexboxLayout>
      <Label .../>
    </FlexboxLayout>
  </v-template>
</RadListView>

List item implementation:

<MDRipple>
  <GridLayout columns="auto,*">
      <Label .../>
  </GridLayout>
</MDRipple>

What is expected?

The RadListView should not throw the error.

What is actually happening?

On Android I have implemented RadLisView with header and footer template. The list has about 150 items. After some time scrolling down and up I get this:

JS: [Vue warn]: Error in nextTick: "Error: Can't insert child, because the reference node has a different parent."

and the RadLisView shows me repeating group of same items. I need to close and restart the app to get back the right items in list.

I have used more RadListView components in this app and the error is thrown on all of them if I scroll up and down on the component.

I have posted the same issue here: NativeScript/NativeScript/issues/8006 I don’t know if it is a {N} or {N}-vue related issue.

[rigor789]

@phlegx If you set a key like that, it will force Vue to re-create the view tree under the list-item element, this will be noticeable in large lists, because scrolling will not be smooth, since whenever a view gets recycled, it will be also re-created - somewhat defeating the purpose of view-recycling.

Let’s keep the issue open, and figure out what causes the error instead!

[rigor789]

@phlegx I have not seen the v-if in the original playground - I would have advised against it sooner!

v-if should not be used in a ListView, because it requires DOM/Node operations, such as adding/removing children. This defeats the purpose of view recycling, as there is no way to optimize these operations.

Either use v-show, which only visually hides the elements without expensive DOM/Node operations, or use separate templates for different types.