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

Question

这里需要一点帮助。我想创建一个承包商的绩效评级，我们可以使用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);
});
},
},

谢谢!

Answer 1

您正在使用item-value="rating"据我所知，它是value="5"对于绑定，它应该是:value="item.rating"试着改变这一点。如果你没有给每个项目打分，一定要检查一下。