element-ui点击radio获取后面input的内容

 项目开发中有一需求,在ABCD四个选项中,选择一正确选项,即选中一radio便获取对应input的内容,存入数据库
如图:
当点击radio A 时,自动获取后面input框中的内容
element-ui点击radio获取后面input的内容_第1张图片
 前提:我选用的是组件库中的单选框组
 根据查阅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值
element-ui点击radio获取后面input的内容_第2张图片
 但还没有达到了我们的需求,获取对应的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>    

你可能感兴趣的:(【vue学习】)