Nativescript Vue：列表数据相互混淆

Question

我有一个数据列表，当它呈现时，它们是在彼此之上呈现的。数据是一个相当长的对象列表，我正在使用多个字段。我通过减少数据列表大小并仅使用字段 (display_name) 制作了一个游乐场示例，并且它仍在发生。它似乎发生在列表的随机位置，但我不确定如何解决或更重要的是，它为什么会发生。我认为这可能与我的 key 不是独一无二的有关，但我确定它是并且仍在发生。我包括一个游乐场并添加了屏幕截图。有什么想法吗？

Playground

Screenshots

编辑：（添加模板）

<RadListView
    for="(movie,index) in this.movies" 
    ref="listView"
    @loaded="onListLoaded($event)"
    @itemTap="onItemTap($event)"
    itemHeight="50"
    :key="index"
    gridSpanCount=1
>
    <v-template>
        <FlexboxLayout class="item-row" :key='`flex` + index' flexDirection="row" width="100%" height="100%" justifyContent="space-between">
            <Stacklayout orientation="horizontal">
                <Image :key='`img-flag` + index' marginTop="-22" class="flag-image" marginBottom="-22" :src="movie.image" height="100%" />
                <Label :key='`display-name` + index' :text="movie.display_name" />
            </Stacklayout>
            <Image :key='`heart-1` + index' @tap="handleToggleFavorite(movie)" width="20" :src="movie.favorite ? heartFilled : heartUnfilled" />
        </FlexboxLayout>
    </v-template>
</RadListView>

Answer 1

看你的模型，我想你可以用一个简单的 GridLayout 来实现它。

<v-template>
    <GridLayout columns="auto,*,auto" class="list-group-item">
        <Image col="0" :src="movie.image"
            class="m-5 thumb img-circle">
        </Image>
        <Label col="1" :text="movie.display_name"></Label>
        <Image col="2" src="path_to_icon" class="thumb">
        </Image>
    </GridLayout>
</v-template>

Nativescript Vue：列表数据相互混淆

Nativescript Vue: List data getting jumbled on top of each other

nativescript

vuejs2

nativescript-telerik-ui

nativescript-vue