How can I show the average of a list of radio buttons

#1

I have list of radio buttons that allows someone to give a rating. How can I show the current rating using the radio buttons. Here are the buttons:

<div class="rating">
<input
	type="radio"
	v-model="rating"
	value="5"
	id="5"
	@change="rateProduct"
/><label for="5">☆</label>
<input
	type="radio"
	v-model="rating"
	value="4"
	id="4"
	@change="rateProduct"
/><label for="4">☆</label>
<input
	type="radio"
	v-model="rating"
	value="3"
	id="3"
	@change="rateProduct"
/><label for="3">☆</label>
<input
	type="radio"
	v-model="rating"
	value="2"
	id="2"
	@change="rateProduct"
/><label for="2">☆</label>
<input
	type="radio"
	v-model="rating"
	value="1"
	id="1"
	@change="rateProduct"
/><label for="1">☆</label>
</div>

So say the average is 3.6 then I would like radio 4 to be selected but it’s not working. I thought that is what v-model is for and it works both ways not just from radio to constant?

#2

Vue has no idea that you want to map 3.6 to 4. Instead of initializing rating with the average, try to initialize it with Math.round(theAverage), and it might work they way you want.