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 相关文章推荐
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
浅析JavaScript中的同名标识符优先级
Dec 06 Javascript
解决window.opener=null;window.close(),只支持IE6不支持IE7,IE8的问题
Jan 14 Javascript
jquery分页对象使用示例
Apr 01 Javascript
JavaScript类的写法
Sep 17 Javascript
ReactNative列表ListView的用法
Aug 02 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
详解Angular6学习笔记之主从组件
Sep 05 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 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
献给php初学者(入门学习经验谈)
2010/10/12 PHP
解析dedecms空间迁移步骤详解
2013/05/15 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
2011/12/11 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
Python实现的Kmeans++算法实例
2014/04/26 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
手写一个python迭代器过程详解
2019/08/27 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
Python列表元素常见操作简单示例
2019/10/25 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
师范应届毕业生自荐信
2013/11/18 职场文书
先进人物事迹材料
2014/12/29 职场文书
学术会议通知
2015/04/15 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL