vuejs2 - Nativescript Vue：列表数据相互混淆(Nativescript Vue: List data getting jumbled on top of each other)

Question

I have a list of data and when it renders, it's rendering on top of each other.

(我有一个数据列表，当它呈现时，它们相互呈现。)

The data is a fairly long list of objects and I am using multiple fields.

(数据是相当长的对象列表，我正在使用多个字段。)

I made a playground example by reducing the data list size and only using field ( display_name ) and it's still happening.

(我通过减少数据列表大小并仅使用字段（ display_name ）来制作一个操场示例，并且这种情况仍在发生。)

It seems to happen in random spots of the list but I am unsure as to how to resolve or more importantly, why it's happening.

(它似乎随机出现在列表中，但我不确定如何解决，或更重要的是，为什么会这样。)

I thought it may have had to do with my key not being unique but I made sure it was and it's still happening.

(我以为这可能与我的key不是唯一的有关，但是我确定它是唯一的，并且还在继续。)

I included a playground and added screenshots.

(我包括一个游乐场并添加了屏幕截图。)

Any ideas?

(有任何想法吗？)

Playground

(操场)

Screenshots

(屏幕截图)

EDIT: (Adding Template)

(编辑：（添加模板）)

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

  ask by ccMagnut translate from so

Answer 1

Looking at your mockup, I think you can achieve it with a simple GridLayout.

(查看您的模型，我认为您可以通过简单的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>