[Vuejs]-Unable to display computed return value outside the function (Vue)

by

0👍

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>

Leave a comment