In my array, I store objects (products) where each product has its own rating that is retrieved from the database. The average rounded rating of each product is displayed on the product itself.
{{ Math.round(Object.values(product.rating)[0]) }}
I want to show this average value using stars (radio buttons) for users to rate a product. When someone rates a product by clicking on the stars, the corresponding number of stars based on the current rating should be checked. When dealing with multiple products in a list, each with different ratings, how can this be achieved?
Each radio button in the UI has an ID and value attribute. How can these attributes be matched with the current rating of the product?
Attempts were made using this
but it didn't work as expected:
<div class="rating">
<input
type="radio"
value="5"
id="5"
:checked="
this.value ==
Math.round(Object.values(product.rating)[0])
"
@change="rateproduct"
/><label for="5">☆</label>
<input
type="radio"
value="4"
id="4"
@change="rateproduct"
:checked="
this.value ==
Math.round(Object.values(product.rating)[0])
"
/><label for="4">☆</label>
<input
type="radio"
value="3"
id="3"
@change="rateproduct"
:checked="
this.value ==
Math.round(Object.values(product.rating)[0])
"
/><label for="3">☆</label>
<input
type="radio"
value="2"
id="2"
@change="rateproduct"
:checked="
this.value ==
Math.round(Object.values(product.rating)[0])
"
/><label for="2">☆</label>
<input
type="radio"
value="1"
id="1"
@change="rateproduct"
:checked="
this.value ==
Math.round(Object.values(product.rating)[0])
"
/><label for="1">☆</label>
</div>
An alternative approach that was attempted also did not yield the desired outcome:
<input
type="radio"
value="5"
id="5"
:checked="
Math.round(Object.values(post.rating)[0])
? 'checked'
: ''
"
@change="ratePost"
/><label for="5">☆</label>
</input>
The goal is to enable users to rate each post individually by checking the appropriate number of stars based on the post's rating. However, only the last post rating gets selected.
<template>
<div class="postsList">
<div class="post" v-for="post in posts" :key="post.id">
<div class="title">Title: {{post.title}}</div>
<div class="currentrating">Rating: {{post.rating}}</div>
<div class="vote">
<div class="rating">
<div class="star" v-for="index in stars" :key="index">
<input
type="radio"
name="stars"
:value="index"
v-model="post.rating"
@change="ratePost"
/><label>☆</label>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import {ref} from 'vue'
const stars = 5;
const posts = ref([
{ id:1, title: "post1", rating: 2 },
{ id:2, title: "post2", rating: 3 },
{ id:3, title: "post3", rating: 2 },
{ id:4, title: "post4", rating: 5 },
{ id:5, title: "post5", rating: 2 },
{ id:6, title: "post6", rating: 1 },
{ id:7, title: "post7", rating: 2 },
{ id:8, title: "post8", rating: 3 },
{ id:9, title: "post9", rating: 4 },
{ id:10, title: "post10", rating: 1 },
]);
</script>
<style scoped>
.post{
padding:10px;
}
.rating{
display:flex;
margin-bottom: 10px;
}
.title{
margin-bottom:10px;
}
.currentrating{
margin-bottom:10px
}
</style>