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 相关文章推荐
Jquery Ajax.ashx 高效分页实现代码
Oct 20 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
jquery增加时编辑jqGrid(实例代码)
Nov 08 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 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不用正则采集速度探究总结
2008/03/24 PHP
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
vue-drawer-layout实现手势滑出菜单栏
2020/11/19 Vue.js
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
python实现神经网络感知器算法
2017/12/20 Python
Python编程argparse入门浅析
2018/02/07 Python
python3实现windows下同名进程监控
2018/06/21 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
Django 外键的使用方法详解
2019/07/19 Python
pytorch实现线性拟合方式
2020/01/15 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
酒吧副总经理岗位职责
2013/12/10 职场文书
大学军训通讯稿
2014/01/13 职场文书
党校学习党性分析材料
2014/12/19 职场文书
董事长秘书工作总结
2015/08/14 职场文书
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers
JS实现简单九宫格抽奖
2022/06/28 Javascript