vue.js - v-rating 不显示存储在 Firestore 数据库中的值

问题描述

这里需要一点帮助。我想创建一个承包商的绩效评级，我们可以使用 vuetify v-rating 对承包商进行评级并将其保存到 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);
                });
        },
    },

谢谢！

标签： vue.jsgoogle-cloud-firestorenuxt.jsvuetify.js

vue.js - v-rating 不显示存储在 Firestore 数据库中的值

问题描述

解决方案

推荐阅读