panietoar / nativescript-vue-star-rating

A Star rating UI component for nativescript vue
MIT License
7 stars 5 forks source link

@ratingSelected not updating the UI properly #6

Open saibbyweb opened 3 years ago

saibbyweb commented 3 years ago

Tapping on the star does fire @ratingSeleceted event with correct value but it does not update the UI properly. It throws a warning in the console:

[Vue warn]: You may have an infinite update loop in a component render function. found in ---> at node_modules/nativescript-vue-star-rating/components/Star.vue

at node_modules/nativescript-vue-star-rating/components/StarRating.vue

My usage:

<!-- template part -->
<StarRating :value="rating" size="50" fillColor="#feed03" @ratingSelected="rating = $event" />

/* script part */
export default {
    data() {
        return {
            rating: 0
        }
    }
}

Strangely enough, it works perfectly fine when used inside a RadListView component?

saibbyweb commented 3 years ago

As mentioned above, it works fine when used in RadListView component:

<RadListView for="rating in ratings">
    <v-template>
        <FlexboxLayout class="center">
            <StarRating v-model="rating.value" size="50" fillColor="#feed03" 
             @ratingSelected="rating.value = $event" />
        </FlexboxLayout>
    </v-template>
</RadListView>

and the script would be:

export default {
    data() {
        return {
            ratings: [{value: 3}]
        }
    }
}

I hope there's fix available.