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

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 不刷新

Nativescript Vue: RadListView isn't refreshing when data changes

nativescript

nativescript-vue