¿Cómo puedo obtener el valor de mi botón de opción múltiple? Tengo una matriz de productos con variantes como color y tamaño, etc. (Se obtienen del backend). Y quiero mostrar un mensaje de validación si el usuario envía el formulario sin marcar el botón de opción. Quiero obtener el valor seleccionado de un grupo de botones de opción.
<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>Guion
<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 algo como el siguiente fragmento:
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>