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 相关文章推荐
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
Jan 31 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
Move.js入门
Feb 08 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
google广告之另类js调用实现代码
Aug 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
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
提高PHP编程效率的方法
2013/11/07 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
PHP之多条件混合筛选功能的实现方法
2019/10/09 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
javascript事件模型代码
2007/07/01 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
2009/09/29 Javascript
测试你的JS的掌握程度的代码
2009/12/09 Javascript
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
JSONP跨域的原理解析及其实现介绍
2014/03/22 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
ECMAScript6--解构
2017/03/30 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
Python自定义线程池实现方法分析
2018/02/07 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
Python reversed函数及使用方法解析
2020/03/17 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
荷兰多品牌网上鞋店:Stoute Schoenen
2017/08/24 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
行政助理的职责
2013/11/14 职场文书
文体活动总结范文
2014/05/05 职场文书
社区植树节活动总结
2015/02/06 职场文书
导游词之凤凰古城
2019/10/22 职场文书