项目开发中有一需求,在ABCD四个选项中,选择一正确选项,即选中一radio便获取对应input的内容,存入数据库
如图:
当点击radio A 时,自动获取后面input框中的内容
前提:我选用的是组件库中的单选框组
根据查阅element-ui的官方API得知,如果使用了单选按钮组,在el-radio-group中绑定v-model,在el-radio中设置好label,当设置了change事件后,选择不同的单选按钮,即可获取不同的radio的label值
<template>
<!-- 单选按钮组 -->
<el-radio-group v-model="radio" @change="getright">
<!-- 单选按钮A -->
<el-radio :label="1">A</el-radio>
<el-radio :label="3">B</el-radio>
<el-radio :label="5">C</el-radio>
<el-radio :label="7">D</el-radio>
</el-radio-group>
</template>
JavaScript部分
<script>
export default {
data() {
return {
radio:"",//单选按钮默认不选中
}
}
}
// methods部分
methods:{
getright(){
console.log("当前选中" + val);
}
}
</script>
效果如图:当选择不同的radio时,会打印不同radio对应的label值
但还没有达到了我们的需求,获取对应的input框的内容
只需要在getright方法中使用switch语句,定义全局变量接收即可
下面附上完整代码
<template>
<!-- 单选按钮组 -->
<div class="m_top">
<el-radio-group v-model="radio" @change="getright">
<!-- 选项A -->
<el-radio :label="1">A</el-radio>
<span>
<el-input
v-model="IA_inputw"
style="width:600px;"
></el-input>
</span>
<!-- 选项B -->
<el-radio :label="3">B</el-radio>
<span>
<el-input
v-model="IB_inputw"
style="width:600px;"
></el-input>
</span>
<!-- 选项C -->
<el-radio :label="5">C</el-radio>
<span>
<el-input
v-model="IC_inputw"
style="width:600px;"
></el-input>
</span>
<!-- 选项D -->
<el-radio :label="7">D</el-radio>
<span>
<el-input
v-model="ID_inputw"
style="width:600px;"
></el-input>
</span>
</el-radio-group>
</div>
</template>
JavaScript部分
<script>
export default {
data() {
return {
radio:"",//单选按钮默认不选中
IA_inputw,选项A
IB_inputw,选项B
IC_inputw,选项C
ID_inputw,选项D
}
}
}
// methods部分
methods:{
getright(){
getright(){
switch (this.radio) {
case 1:
this.currentValue = this.IA_inputw;
break;
case 3:
this.currentValue = this.IB_inputw;
break;
case 5:
this.currentValue = this.IC_inputw;
break;
case 7:
this.currentValue = this.ID_inputw;
break;
}
console.log("正确答案是:" + this.currentValue);
}
}
}
</script>