How can I get the value from my multiple radio button. I have a product array with variants like colour and size etc...(They are getting from backend).And i want to show a validate message if user submit form without checking radio button. I want to get the selected value from a group of radio buttons.
<form @submit.prevent="submit">
<div v-for="(variants, index) in product_details" :key="index">
<p>
<b>{{ variants.title }}</b> -
</p>
<div
class="input-group mt-2 increasenumber"
>
<div
class="optionalitem"
v-for="(detail, index1) in variants.details"
:key="index1 + variants.title"
>
<input
type="radio"
:name="variants.title"
:id="index + '_' + index1"
class="newoneche"
:value="detail.value"
/>
<label :for="index + '_' + index1" class="select01"
><p class="highlight">
{{ detail.name }}
</p>
</label>
</div>
</div>
</div>
<button color="success">Submit</button>
</form>
Script
<script>
export default {
data() {
return {
product_details: [
{
title: "Choose Colour",
details: [
{
name: "Red",
value: "red",
},
{
name: "Green",
value: "green",
},
{
name: "Yellow",
value: "yellow",
},
],
},
{
title: "Choose Size",
details: [
{
name: "Small",
value: "small",
},
{
name: "Large",
value: "lage",
},
],
},
],
};
},
</script>
Mybe something like following snippet:
new Vue({
el:"#demo",
data() {
return {
product_details: [{title: "Color", details: [{name: "Red", value: "red",}, {name: "Green", value: "green",}, {name: "Yellow", value: "yellow",},],}, {title: "Size", details: [{name: "Small", value: "small",},{name: "Large", value: "large",},],},],
products: [{name: 'Product 1', Color: 'red', Size: 'large'}, {name: 'Product 2', Color: 'green', Size: 'small'}]
}
}
}).cont, .optionalitem, .input-group {
display: flex;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div v-for="(product, i) in products" :key="i">
<h3>{{ product.name }}</h3>
<form @submit.prevent="submit">
<div v-for="(variants, index) in product_details" :key="index" class="cont">
<p><b>Choose {{ variants.title }}</b> - </p>
<div class="input-group mt-2 increasenumber">
<div
class="optionalitem"
v-for="(detail, index1) in variants.details"
:key="index1 + variants.title"
>
<input
type="radio"
:id="index + '_' + index1"
class="newoneche"
:value="detail.value"
v-model="products[i][variants.title]"
/>
<label :for="index + '_' + index1" class="select01">
<p class="highlight">
{{ detail.name }}
</p>
</label>
</div>
</div>
</div>
{{product}}
<button color="success">Submit</button>
</form>
</div>
</div>