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

 项目开发中有一需求,在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>    
  • 8
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
引用\[1\]:新建 /src/components/element/index.js 文件,index.js 示例代码如下: import { Button, Input, Radio, Table, Form } from 'element-ui' const coms = \[ Button, Input, Radio, Table, Form \] export default { install(Vue, options){ coms.map(c => { Vue.component(c.name, c) }) } } 。 引用\[2\]:在 main.js 中引入自定义 element 插件: import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' //引入 element 插件 import element from './components/element' Vue.use(element) Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app') 。 引用\[3\]:在 main.js 入口文件中引入组件: import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import { Button } from 'element-ui'; // 按需引入组件 Vue.component(Button.name, Button); // 注册全局组件 // 或 // Vue.use(Button) // 或指定组件名称 // Vue.component('my-button', Button); Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app') 第6步:使用组件 <template> <div id="app"> <el-button type="primary">按钮</el-button> <!-- <my-button>按钮</my-button> --> </div> </template> 封装 Element 模块 。 问题: npmi element-ui --save 回答: npmi element-ui --save 是一个错误的命令。正确的命令应该是 npm install element-ui --save。这个命令用于在你的项目中安装 element-ui 包,并将其添加到项目的依赖中。 #### 引用[.reference_title] - *1* *2* *3* [Vue 项目中按需引入 ElementUI 的正确方法](https://blog.csdn.net/p445098355/article/details/121207285)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值