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 相关文章推荐
IE中jquery.form中ajax提交没反应解决方法分享
Sep 11 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
vuex实现购物车的增加减少移除
Jun 28 Javascript
8个非常实用的Vue自定义指令
Dec 15 Vue.js
如何解决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 编写的日历
2006/10/09 PHP
PHP 和 MySQL 基础教程(一)
2006/10/09 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
JavaScript 学习技巧
2010/02/17 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
python2.7 json 转换日期的处理的示例
2018/03/07 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
本科生导师推荐信范文
2014/05/18 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
2015年入党决心书
2015/02/05 职场文书
我的长征观后感
2015/06/09 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书