Question

我有一个RadListView的道具totalMovies，它是一个数组。每部电影都包含一个image字段和一个favorite字段。如果favorite字段为false，则会显示未填充的心脏图像，并且会在tap上触发一个事件，该事件会将电影的favorite更改为true。单击心脏后，我在控制台中看到它已注册，并再次通过VueTools验证totalMovies将我喜欢的电影显示为具有favorite: true，但显示的图像始终是unfilled-heart图片。我正在猜测或假设RadListView无法正确刷新？

<RadListView
    for="(movie,index) in totalMovies" 
    @itemTap="onItemTap($event)"
    itemHeight="80"
    :key="index"
    gridSpanCount=1
>
    <v-template>
        <FlexboxLayout class="item-row" :key="index" flexDirection="row" width="100%" height="100%">
            <Image v-if="movie.favorite" width="20" src="~/assets/images/heart-filled.png" />
            <Image v-else @tap="handleToggleFavorite(movie)" width="20" src="~/assets/images/heart-unfilled.png" />
        </FlexboxLayout>
    </v-template>
</RadListView>

编辑：添加游乐场：http://play.nativescript.org/?template=play-vue&id=GNo11S&v=2

Answer 1

ObservableArray 侦听数组索引的更改并刷新列表视图。因此，如果您使用的是ObservableArray，请尝试使用setItem方法更新索引处的项目。

否则，在您的情况下简单数组应该可以工作，因为Vue可以检测到更改。

Nativescript Vue：数据更改时RadListView不刷新

1 个答案: