v-rating 不显示存储在 firestore 数据库中的值

Question

这里需要一点帮助。我想创建一个承包商的绩效评级，我们可以在其中使用 vuetify v-rating 对承包商进行评级并将其保存到 firebase firestore 中。

我成功更新了评分并将其保存在 firestore 中，但每当我刷新页面时，它都会显示一个空的评分槽，就像这样 rating slot is empty after refresh，不显示我刚刚输入的评分，即使它存储在 firestore 中。

如果我希望它显示为数字，它确实会显示，如下所示：it shows the rating value if display it as a number.

如何以星级本身的形式显示？

<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);
                });
        },
    },

谢谢！

Answer 1

您正在使用 item-value="rating"。据我所知，它是 value="5" 并且对于绑定它应该是 :value="item.rating" 尝试更改它。如果您没有对每个项目进行评分，请务必检查一下。

v-rating 不显示存储在 firestore 数据库中的值

v-rating not displaying the value stored in the firestore database

vue.js

nuxt.js

vuetify.js

google-cloud-firestore