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

Posted 2023-04-13

【中文标题】Nativescript Vue：当数据更改时，RadListView 不刷新

【英文标题】：Nativescript Vue: RadListView isn't refreshing when data changes

【发布时间】：2020-02-24 08:37:15

【问题描述】：

我有一个 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"  >
            <Image v-if="movie.favorite"  src="~/assets/images/heart-filled.png" />
            <Image v-else @tap="handleToggleFavorite(movie)"  src="~/assets/images/heart-unfilled.png" />
        </FlexboxLayout>
    </v-template>
</RadListView>

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

【问题讨论】：

建议模板保持静态，使用一张Image，根据条件绑定src。

感谢@Manoj。我会试试的。我实际上找到了另一种解决方法。我在切换收藏夹的功能中添加了这个：this.$refs.radListView.nativeView.refresh();，它可以工作。我认为这是一种糟糕的处理方式？

刷新整个列表视图，所以是的，它可能不是最佳选择。

@Manoj 我正在尝试您的解决方案，但对如何做到这一点感到困惑。 <Image @tap="handleToggleFavorite(movie)" width="20" :src="movie.favorite ? heartFilled : heartUnfilled" /> 。我将heartFilled 作为具有该资产的url 的组件上的initialData，并将heartUnfilled 作为initialData 设置为该资产的url。我不相信我这样做是正确的。我假设你的意思是这样做：<Image @tap="handleToggleFavorite(movie)" width="20" :src="assetURL" /> 并让assetURL 是动态的，但是如果它是基于循环的，那么 initialData assetURL 怎么可能是动态的

看起来不错，如果您仍有问题，请分享 Playground 示例

【参考方案1】：

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

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