He estado trabajando en un sistema de clasificación por estrellas. Quiero obtener el valor de calificación total basado en las calificaciones de los usuarios para cada producto por separado y luego obtener su valor promedio. Pude obtener la lógica correcta, sin embargo, tengo problemas para pasar el valor total de mi función de propiedad calculada (totalRating()) para que se muestre en mi sitio web. En este momento solo me estoy enfocando en devolver mi valor total con éxito.

Aquí está el código:

 <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>