Unable to display computed return value outside the function (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>

You return `totalValue` before your `firebase` request has completed as the firebase call is a promise. — Ohgodwhy, Nov 01 '21 at 17:09
Does this answer your question? [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — CherryDT, Nov 01 '21 at 17:11

score 0 · Answer 1 · answered Nov 01 '21 at 17:09

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>

I'm sorry but that doesn't work. – Ruzna Rizvi Nov 01 '21 at 19:29 — Ruzna Rizvi, Nov 01 '21 at 19:29

Unable to display computed return value outside the function (Vue)

1 Answers1