Nativescript Vue: RadListView isn't refreshing when data changes

Question

I have a RadListView for a prop, totalMovies, which is an array. Each movie contains an image field and favorite field. If the favorite field is false, then an unfilled heart image shows and there's an event that fires on tap that changes that movie's favorite to true. After clicking the heart, I see in console that it registers and I verified again with VueTools that totalMovies shows the movies I favorites as having favorite: true, but the image that shows is always the unfilled-heart image. I am guessing or assuming that the RadListView is not refreshing properly?

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

EDIT: Adding playground: http://play.nativescript.org/?template=play-vue&id=GNo11S&v=2

It's recommended to keep your template static, use one Image and bind src based on condition. — Manoj
thanks @Manoj. I will try that. I actually found another workaround. I added this in the function that toggled favorites: this.$refs.radListView.nativeView.refresh(); and it works. I assume this is a poor way to handle it? — hectoraloneo
That refreshes the whole list view, so yes it may not be the best option. — Manoj
@Manoj I am trying your solution and confused as to how I can do it. <Image @tap="handleToggleFavorite(movie)" width="20" :src="movie.favorite ? heartFilled : heartUnfilled" /> . I have heartFilled as initialData on the component that has the url to that asset and heartUnfilled as initialData set to the url for that asset. I don't believe I am doing this correct. I assume you mean to do it like this: <Image @tap="handleToggleFavorite(movie)" width="20" :src="assetURL" /> and have assetURL be dynamic but how can that initialData assetURL be dynamic if it's based on loop — hectoraloneo
That looks good, if you still have issues please share a Playground sample — Manoj

Manoj Manoj · Accepted Answer · 2019-10-30T06:03:46

ObservableArray listens to changes on array index and refreshes the list view. So if you are using ObservableArray, try to update item at index using setItem method.

Otherwise in your case simple array should work as Vue can detect the changes.

Nativescript Vue: RadListView isn't refreshing when data changes

1 Answers