Vue循环遍历选项赋值到对应控件的实现方法


Posted in Javascript onJune 22, 2020

老规矩:先走流程,上动图看效果!在此推荐个大佬,为我提供解决思路,大家多多访问他的博客,希望带给大家帮助

https://blog.csdn.net/yyp0304Devin

Vue循环遍历选项赋值到对应控件的实现方法

下面就一步步为大家讲解如何实现将它的试题选项赋值到对应的控件中的,因为题型较多,拿单选题型为大家演示:不同题型它的界面也是不同的,这里也有个技术点,这里就先不讲解了。

如动图所示,要完成这样的功能,肯定是要访问后端接口的

Vue循环遍历选项赋值到对应控件的实现方法

知道URL后,我们就知道携带的试题ID过去

一、传递ID

在点击编辑按钮事件中将ID传值过去

<el-button
	    @click="editQuestion(scope.row)"
	    type="text"
	    size="small"
	    icon="el-icon-edit"
	></el-button>
	
	// 携带的题型ID
	carryCurrentRowCode: [
	        { id: "" }
	],
	
	// 通过点击按钮将ID传值到add-question界面
	editQuestion(row) {
	      this.carryCurrentRowCode = row;
	      this.$router.push({
	        path: "add-question",
	        query: {
	          carryCurrentRowCode: this.carryCurrentRowCode
	        }
	      });
	    },

二、在钩子函数中通过路由接收ID

this.$axios
	.get("/option/queryById/" + this.carryCurrentRowCode.id)
	.then(res => {  
});

Vue循环遍历选项赋值到对应控件的实现方法

在Vue.js文件中写好代理路由,因为是新的接口,让我在访问路径时忘了写,明明获取到了ID,就是报404,疑惑了好半天,所以一定不要忘记写好代理!

proxy: { 
	'/option': {
 target: 'http://localhost:8013'
 },
}

三、循环遍历data数组,将不同试题内容赋值到对应控件

Vue循环遍历选项赋值到对应控件的实现方法

由Swagger测试接口可以看出,给我们的返回数据得到的是这样一个数组,如何将对应的试题内容赋值到相应的控件中,就要用到for循环了

传统for循环用法:

String[] arr = { "amy", "heinrich", "cindy", "git" };
	  
	     for (int i = 0; i < arr.length; i++) {
	          System.out.println(arr[i]);
}

打印台:

amy

heinrich

cindy

git

for循环可以获取到它的optionOrder,以此来区分不同的试题选项,之后再做判断赋值到相应的控件就好了

for (var i = 0; i < res.data.data.length; i++) {
            // 选项A输入框+富文本编辑器
            if (res.data.data[i].optionOrder == 1) {
              this.IA_inputw = res.data.data[0].optionName;
              this.FA_input = res.data.data[0].optionName;
            } else if (res.data.data[i].optionOrder == 2) {
              //选项B输入框+富文本编辑器
              this.IB_inputw = res.data.data[1].optionName;
              this.FB_input = res.data.data[1].optionName;
            } else if (res.data.data[i].optionOrder == 3) {
              //选项C输入框+富文本编辑器
              this.IC_inputw = res.data.data[2].optionName;
              this.FC_input = res.data.data[2].optionName;
            } else if (res.data.data[i].optionOrder == 4) {
              //选项D输入框+富文本编辑器
              this.ID_inputw = res.data.data[3].optionName;
              this.FD_input = res.data.data[3].optionName;
            }
          }

功能实现,多选、判断等不同类型的试题都可以使用这个方法实现赋值。

到此这篇关于Vue循环遍历选项赋值到对应控件的实现方法的文章就介绍到这了,更多相关Vue循环遍历选项赋值到对应控件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js不是基础的基础
Dec 24 Javascript
ExtJs使用IFrame的实现代码
Mar 24 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
JS使用post提交的两种方式
Dec 03 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
Sep 22 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 #jQuery
解决Vue 给mapState中定义的属性赋值报错的问题
Jun 22 #Javascript
支付宝小程序实现省市区三级联动
Jun 21 #Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 #Javascript
微信小程序实现选择地址省市区三级联动
Jun 21 #Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 #Javascript
jQuery 移除事件的方法
Jun 20 #jQuery
You might like
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
微信小程序如何获取用户手机号
2018/01/26 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
Python用threading实现多线程详解
2017/02/03 Python
Python实现购物车功能的方法分析
2017/11/10 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
Python实现翻转数组功能示例
2018/01/12 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
对Python的zip函数妙用,旋转矩阵详解
2018/12/13 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
在django模板中实现超链接配置
2019/08/21 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
信息管理员岗位职责
2013/12/01 职场文书
篝火晚会主持词
2014/03/25 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
融资合作协议书范本
2014/10/17 职场文书
护理医院见习报告
2014/11/03 职场文书
内乡县衙导游词
2015/02/05 职场文书
导游词之吉林花园山
2019/10/17 职场文书
用Python可视化新冠疫情数据
2022/01/18 Python
索尼ICF-36收音机评测
2022/04/30 无线电