need a bit of help here. I want to create a contractor's performance rating where we can rate the contractor using vuetify v-rating and save it into firebase firestore.

I succeeded to update rating and save it in firestore but whenever I refresh the page it shows an empty rating slots like this rating slot is empty after refresh, not showing the rating that i've just key-in even though it is stored in firestore.

it does show up if I want it to display as a number, like this: it shows the rating value if display it as a number.

How to display it in the form of star rating itself?

<template>
           <div>
               <v-data-table
                dense
                :headers="headers"
                :items="subwork"
                :loading="loading"
                class="elevation-1"
                style="margin: 3%;">
                    <template v-slot:[`item.rating`]="{ item }">
                        <v-rating
                        color="yellow"
                        half-increments
                        @input="giveRating(item, $event)"
                        item-value="rating"></v-rating>
                    </template>
                    <template v-slot:no-data>
                        <v-btn color="primary" @click="initialize"> Reset </v-btn>
                    </template>
   
               </v-data-table>
           </div>
       </template>

To load the document & add the rating to firestore

methods: {
        initialize() {
            this.loading = true
            this.subwork = []
            firestore
                .collection('registersubwork')
                .get()
                .then((querySnapshot) => {
                    querySnapshot.forEach((doc) => {
                        // doc.data() is never undefined for query doc snapshots
                        this.subwork.push({ ...doc.data(), id: doc.id, })
                        this.loading = false
                    })
                    console.log(this.subwork)
                })
        },

        giveRating(item, value) {
            this.editedIndex = this.subwork.indexOf(item);
            this.editedItem = Object.assign({}, item);
            console.log(item, value)
            if (this.editedIndex > -1) {
                Object.assign(this.subwork[this.editedIndex], this.editedItem);
            } else {
                this.subwork.push(this.editedItem);
            }
            var data = {
                rating: this.editedItem.rating,
            };
            firestore
                .collection("registersubwork")
                .doc(this.editedItem.id)
                .set({ rating: value }, { merge: true })// .update(data)
                .then(() => {
                    console.log("Rating updated succesfully!");
                })
                .catch(e => {
                    console.log(e);
                });
        },
    },

Thanks!

CodePudding user response：

You're using item-value="rating". as far as i know it's value="5" and for binding it should be :value="item.rating" try changing this. if you don't have rating with each item make sure to check that.