Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 72388

Radio input in v-for loop selects multiple radio buttons of the same value

$
0
0

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.


Viewing all articles
Browse latest Browse all 72388

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>