v-rating组件无法展示Firestore中已存储的评分值如何解决？

问题根因 #

v-rating 组件没有和当前行的评分值做绑定，组件默认值为0所以刷新后展示为空，你直接输出数字是手动读取了item.rating，但v-rating需要你主动传入要展示的数值才会渲染对应星级。你代码中写的item-value="rating"是v-rating用于多选数组场景的属性，当前单条评分场景不需要该配置。

修复步骤 #

1. 修改模板中v-rating的配置，增加双向绑定：

<template v-slot:[`item.rating`]="{ item }">
  <v-rating
    color="yellow"
    half-increments
    v-model="item.rating"
    @input="giveRating(item, $event)"
  ></v-rating>
</template>

2. （可选优化）调整initialize方法中loading关闭的位置，避免第一条数据加载完就提前关闭loading：

initialize() {
  this.loading = true
  this.subwork = []
  firestore
    .collection('registersubwork')
    .get()
    .then((querySnapshot) => {
      querySnapshot.forEach((doc) => {
        this.subwork.push({ ...doc.data(), id: doc.id })
      })
      // 所有数据加载完成后再关闭loading
      this.loading = false
      console.log(this.subwork)
    })
},

3. （可选校验）如果Firestore中存储的rating是字符串类型，需要在加载数据时转成数值类型：

this.subwork.push({ 
  ...doc.data(), 
  id: doc.id, 
  rating: Number(doc.data().rating) 
})

修改完成后刷新页面，v-rating就会自动读取item.rating的值渲染对应星级了。

内容的提问来源于stack exchange，提问作者user16136444