Блог

здесь нужна небольшая помощь. Я хочу создать рейтинг производительности подрядчика, в котором мы сможем оценить подрядчика с помощью v-рейтинга vuetify и сохранить его в firebase firestore.

Мне удалось обновить рейтинг и сохранить его в firestore, но всякий раз, когда я обновляю страницу, она показывает пустые слоты для рейтингов, например, этот слот для рейтингов пуст после обновления, не показывая рейтинг, который я только что ввел, даже если он хранится в firestore.

он отображается, если я хочу, чтобы он отображался в виде числа, например: он показывает значение рейтинга, если отображать его в виде числа.

Как отобразить его в виде самого звездного рейтинга?

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

Чтобы загрузить документ и добавить рейтинг в 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);
                });
        },
    },
 

Спасибо!

Вы используете значение элемента=»рейтинг». насколько я знаю, это значение=»5″, и для привязки оно должно быть :значение=»пункт.рейтинг», попробуйте изменить это. если у вас нет рейтинга по каждому пункту, обязательно проверьте это.