无法在函数外显示计算的返回值（Vue）

Question

I've been working on a star rating system. I want to get the total rating value based on user ratings for each product separately and later get its average value. I was able to get the logic right, however, I'm having trouble passing the total value from my computed property function (totalRating()) to get it displayed on my website. Right now I'm only focusing on returning my total value successfully.

Here's the code:

<template>
    <main>                       
       <div v-if="review.productId == $route.params.id">                  
           <div>Total: {{ totalRating }}</div> //fails to display the value               
           <div>({{ resultCount }} Review/s)</div>
       </div>           
    </main>

  
  </div>
</template>

<script>
import firebase from "firebase";
import "firebase/firestore";
import StarRating from "vue-star-rating";

export default {
  name: "ProductDetails",
  data() {
    return {
      itemId: this.$route.params.id,    
      items: [],
      item: {},
      reviews: [],
      review: {
        message: "",
        date: new Date().toLocaleString(),
        productId: this.$route.params.id,
        rating: 0,
        isRated: false,
        userId: "",
        username: "",
        email: "",
      },
    };
  },
  computed: {
    resultCount() {
      return this.filteredReviews.length;
    },
    totalRating() {          
      var totalValue = 0;
      firebase
        .firestore()
        .collection("reviews")
        .where("productId", "==", this.$route.params.id)
        .get(this.$route.params.id)

        .then(function(querySnapshot) {
          querySnapshot.forEach(function(total) {
            totalValue += total.data().rating;
          });
          console.log("in:" + totalValue); //success
        });
      console.log("out", totalValue); //fail
      return totalValue; 
    },
    filteredReviews: function() {
      return this.reviews.filter((review) => {
        return review.productId.match(this.$route.params.id);
      });
    },
  },
};
</script>

Answer 1

Can you try this

<template>
    <main>                       
       <div v-if="review.productId == $route.params.id">                  
           <div>Total: {{ totalRatingData }}</div> //fails to display the value               
           <div>({{ resultCount }} Review/s)</div>
       </div>           
    </main>

  
  </div>
</template>

<script>
import firebase from "firebase";
import "firebase/firestore";
import StarRating from "vue-star-rating";

export default {
  name: "ProductDetails",
  data() {
    return {
      itemId: this.$route.params.id,    
      items: [],
      totalRatingData: "",
      item: {},
      reviews: [],
      review: {
        message: "",
        date: new Date().toLocaleString(),
        productId: this.$route.params.id,
        rating: 0,
        isRated: false,
        userId: "",
        username: "",
        email: "",
      },
    };
  },
  computed: {
    resultCount() {
      return this.filteredReviews.length;
    },
    totalRating() {          
      var totalValue = 0;
      firebase
        .firestore()
        .collection("reviews")
        .where("productId", "==", this.$route.params.id)
        .get(this.$route.params.id)

        .then(function(querySnapshot) {
          querySnapshot.forEach(function(total) {
            totalValue += total.data().rating;
          });
           this.totalRatingData = totalValue;
          console.log("in:" + totalValue); //success
        });
      console.log("out", totalValue); //fail
      return totalValue; 
    },
    filteredReviews: function() {
      return this.reviews.filter((review) => {
        return review.productId.match(this.$route.params.id);
      });
    },
  },
};
</script>