A bit difficult to explain,
I have created a simple rating system which uses input type ="radio"
for a products array.
Using v-for="product in products"
, I loop through the array showing all the products on the page.
<div class="block" v-for="product in products">
<h3>{{product.name}}</h3>
<p>Desc: {{product.description}}</p>
<p>Price: £{{product.price}}</p>
<h3>Rating</h3>
<form @submit.prevent="ratingAdd(product)">
<input type="radio" value = "1" name = "ratings1" v-model="ratingNum">1
<input type="radio" value = "2" name = "ratings2" v-model="ratingNum">2
<input type="radio" value = "3" name = "ratings3" v-model="ratingNum">3
<input type="radio" value = "4" name = "ratings4" v-model="ratingNum">4
<input type="radio" value = "5" name = "ratings5" v-model="ratingNum">5
<input type="submit">
</div>
The products display just fine, but whenever I click on a radio button it selects multiple radio buttons of the same value across all products. i.e If I click on 3 on product 1, it would select 3 on the rest of the products as well.
I did try using the same name as well. It does not work.
Any help will be appreciated.
Thanks in advance.