Is there a way to extract the selected value from a group of radio buttons in a form that includes product variants like color and size obtained from the backend? Additionally, how can a validation message be displayed if the form is submitted without selecting a radio button?
<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"gt;
{{ 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>