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

[phlegx]

Environment

• 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

Describe the bug

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.

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>

Expected behavior

The RadListView should not throw the error.

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

[phlegx]

Seems to be solved adding :key="song.id". This is not documented and it was a coincidence to try it with key attribute.

<RadListView id="songs-alphabet-order-list" ref="songsAlphabetOrderList" for="song in songsAlphabetOrder" @itemTap="onNavigationAlphabetItemTap">
  ...
  <v-template>
    <list-item :song="song" :key="song.id"/>
  </v-template>
  ...
</RadListView>

[phlegx]

Re-open!

Comment from @rigor789 at nativescript-vue/nativescript-vue/issues/566#issuecomment-545585483:

@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!