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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
JavaScript 参数中的数组展开 [译]
Sep 21 Javascript
手机号码,密码正则验证
Sep 04 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 Javascript
JS 基本概念详细介绍
Oct 16 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目录函数实现创建、读取目录教程实例
2011/01/13 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
javascript 继承实现方法
2009/08/26 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
javascript防抖函数debounce详解
2019/06/11 Javascript
Python自定义类的数组排序实现代码
2016/08/28 Python
使用python实现BLAST
2018/02/12 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
使用Scrapy爬取动态数据
2018/10/21 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
html5读取本地文件示例代码
2014/04/22 HTML / CSS
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
电子邮箱格式怎么写
2014/01/12 职场文书
生物制药自我鉴定
2014/01/25 职场文书
个人公开承诺书
2014/03/28 职场文书
小学庆六一活动总结
2014/08/28 职场文书
七一讲话心得体会
2014/09/05 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
解决golang在import自己的包报错的问题
2021/04/29 Golang
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js