如何从我的多个单选按钮中获取值。我有一个产品数组,其中包含颜色和大小等变体......(它们来自后端)。如果用户提交表单而不检查单选按钮,我想显示一条验证消息。我想从一组单选按钮中获取选定的值。
<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>
v-model您的单选按钮缺少一个:value绑定应该保持原样。
解决方案
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>