elementui radio vue页面中出现多组radio,提交的时候如何判断那组未选中
时间: 2023-06-26 09:03:20 浏览: 87
如果你有多组 Radio,每一组的选项应该是互斥的,即在同一组中只能选中一个选项。那么,提交时,如果某一组的选项没有被选中,应该返回相应的提示信息,让用户选择一个选项。
你可以通过给每一组 Radio 绑定不同的 v-model 值来区分它们,然后在提交时判断每一组的 v-model 是否有值。如果没有值,就说明这一组的选项没有被选中。
以下是一个示例代码,在其中,分别给两组 Radio 绑定了不同的 v-model 值,然后在提交时判断这两个值是否都存在,如果有一个不存在,就提示用户选择:
```
<template>
<div>
<h2>组1</h2>
<el-radio-group v-model="radio1">
<el-radio label="1">选项1</el-radio>
<el-radio label="2">选项2</el-radio>
</el-radio-group>
<h2>组2</h2>
<el-radio-group v-model="radio2">
<el-radio label="1">选项1</el-radio>
<el-radio label="2">选项2</el-radio>
</el-radio-group>
<el-button @click="submit">提交</el-button>
</div>
</template>
<script>
export default {
data() {
return {
radio1: '',
radio2: ''
}
},
methods: {
submit() {
if (!this.radio1) {
alert('请选择组1的选项')
} else if (!this.radio2) {
alert('请选择组2的选项')
} else {
alert('提交成功')
}
}
}
}
</script>
```
阅读全文