首页 >> js开发 >> jsVue循环遍历选项赋值到对应控件的实现方法js大全
jsVue循环遍历选项赋值到对应控件的实现方法js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
老规矩：先走流程，上动图看效果！在此推荐个大佬，为我提供解决思路，大家多多访问他的博客，希望带给大家帮助https://blog.csdn.net/yyp0304Devin下面就一步步为大家讲解如何实现将它的试题选项赋值到对应的控件中的，因为题型较多，拿单选题型为大家演示：不同题型它的界面也是不同的，这里也有个技术点，这里就先不讲解了。如动图所示，要完成这样的功能，肯定是要访问后端接口的知道URL后，我们就知道携带的试题ID过去一、传递ID一、传递ID一、传递ID在点击编辑按钮事件中将ID传值过去在点击编辑按钮事件中将ID传值过去
@click="editQuestion(scope.row)"
type="text"
size="small"
icon="el-icon-edit"
>
// 携带的题型ID
carryCurrentRowCode: [
{ id: "" }
],
// 通过点击按钮将ID传值到add-question界面
editQuestion(row) {
this.carryCurrentRowCode = row;
this.$router.push({
path: "add-question",
query: {
carryCurrentRowCode: this.carryCurrentRowCode
}
});
},
@click="editQuestion(scope.row)"
type="text"
size="small"
icon="el-icon-edit"
>
// 携带的题型ID
carryCurrentRowCode: [
{ id: "" }
],
// 通过点击按钮将ID传值到add-question界面
editQuestion(row) {
this.carryCurrentRowCode = row;
this.$router.push({
path: "add-question",
query: {
carryCurrentRowCode: this.carryCurrentRowCode
}
});
},二、在钩子函数中通过路由接收ID二、在钩子函数中通过路由接收ID二、在钩子函数中通过路由接收ID
this.$axios
.get("/option/queryById/" + this.carryCurrentRowCode.id)
.then(res => {
});
this.$axios
.get("/option/queryById/" + this.carryCurrentRowCode.id)
.then(res => {
});在Vue.js文件中写好代理路由，因为是新的接口，让我在访问路径时忘了写，明明获取到了ID，就是报404，疑惑了好半天，所以一定不要忘记写好代理！
proxy: {
'/option': {
target: 'http://localhost:8013'
},
}
proxy: {
'/option': {
target: 'http://localhost:8013'
},
}三、循环遍历data数组，将不同试题内容赋值到对应控件三、循环遍历data数组，将不同试题内容赋值到对应控件三、循环遍历data数组，将不同试题内容赋值到对应控件由Swagger测试接口可以看出，给我们的返回数据得到的是这样一个数组，如何将对应的试题内容赋值到相应的控件中，就要用到for循环了传统for循环用法：
String[] arr = { "amy", "heinrich", "cindy", "git" };
for (int i = 0; i < arr.length; i++) {
System.out.println(arr[i]);
}
String[] arr = { "amy", "heinrich", "cindy", "git" };
for (int i = 0; i < arr.length; i++) {
System.out.println(arr[i]);
}打印台：
amy
heinrich
cindy
git
amyheinrichcindygitfor循环可以获取到它的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;
}
}
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;
}
}功能实现，多选、判断等不同类型的试题都可以使用这个方法实现赋值。
@click="editQuestion(scope.row)"
type="text"
size="small"
icon="el-icon-edit"
>
// 携带的题型ID
carryCurrentRowCode: [
{ id: "" }
],
// 通过点击按钮将ID传值到add-question界面
editQuestion(row) {
this.carryCurrentRowCode = row;
this.$router.push({
path: "add-question",
query: {
carryCurrentRowCode: this.carryCurrentRowCode
}
});
},
@click="editQuestion(scope.row)"
type="text"
size="small"
icon="el-icon-edit"
>
// 携带的题型ID
carryCurrentRowCode: [
{ id: "" }
],
// 通过点击按钮将ID传值到add-question界面
editQuestion(row) {
this.carryCurrentRowCode = row;
this.$router.push({
path: "add-question",
query: {
carryCurrentRowCode: this.carryCurrentRowCode
}
});
},二、在钩子函数中通过路由接收ID二、在钩子函数中通过路由接收ID二、在钩子函数中通过路由接收ID
this.$axios
.get("/option/queryById/" + this.carryCurrentRowCode.id)
.then(res => {
});
this.$axios
.get("/option/queryById/" + this.carryCurrentRowCode.id)
.then(res => {
});在Vue.js文件中写好代理路由，因为是新的接口，让我在访问路径时忘了写，明明获取到了ID，就是报404，疑惑了好半天，所以一定不要忘记写好代理！
proxy: {
'/option': {
target: 'http://localhost:8013'
},
}
proxy: {
'/option': {
target: 'http://localhost:8013'
},
}三、循环遍历data数组，将不同试题内容赋值到对应控件三、循环遍历data数组，将不同试题内容赋值到对应控件三、循环遍历data数组，将不同试题内容赋值到对应控件由Swagger测试接口可以看出，给我们的返回数据得到的是这样一个数组，如何将对应的试题内容赋值到相应的控件中，就要用到for循环了传统for循环用法：
String[] arr = { "amy", "heinrich", "cindy", "git" };
for (int i = 0; i < arr.length; i++) {
System.out.println(arr[i]);
}
String[] arr = { "amy", "heinrich", "cindy", "git" };
for (int i = 0; i < arr.length; i++) {
System.out.println(arr[i]);
}打印台：
amy
heinrich
cindy
git
amyheinrichcindygitfor循环可以获取到它的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;
}
}
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;
}
}功能实现，多选、判断等不同类型的试题都可以使用这个方法实现赋值。
相关文章:
- jsJS的时间格式化和时间戳转换函数示例详解js大全
- jsElement Breadcrumb 面包屑的使用方法js大全
- jsvue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)js大全
- js代码JavaScript 监听组合按键思路及代码实现
- JavaScriptvue.js 解决v-model让select默认选中不生效的问题
- jsvue中touch和click共存的解决方式js大全
- js解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题js大全
- js解决vue中的无限循环问题js大全
- jsvue 监听窗口变化对页面部分元素重新渲染操作js大全
- js解决vue bus.$emit触发第一次$on监听不到问题js大全
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
