您现在的位置是：网站首页> 编程资料编程资料

Vue中如何使用Map键值对传参详析_vue.js_

2023-05-24 381人已围观

简介 Vue中如何使用Map键值对传参详析_vue.js_

Vue里使用Map键值对传参

问题描述：在参数传递时时候Map键值对key:value的形式进行传参。

1、date数据区定义声明map变量和中间数据变量temp：

data(){ return{ //其他代码 map:'', temp:[] } },

2、methods方法区接口传值：声明map为Map变量，接收接口传过来的key数据生成表单项数据项:

this.map=new Map()

即：

//点击待办任务，去处理待办任务 填写待办表单 goDealTaskShow(index){ this.$fetchPost('你的接口',{taskID:this.taskForm.taskId}).then(res=>{ this.getTaskForm = res.data; this.map = new Map() for (var i=0;i

3、form表单数据绑定，且根据for循环index值用temp数据进行数据绑定。

4、mapUpdate方法将temp数组接收的值对Map进行key:value传值：

mapUpdate(key,index){ this.map.set(key,this.temp[index]); console.log(key) console.log(this.map) }

5、mapToJson方法对map进行json数据格式转换：

mapToJson(map) { return JSON.stringify(this.strMapToObj(map)); },

6、map数据赋值给接口参数，进行传参：

saveDealTaskForm(){ this.$forceUpdate(); this.saveTaskForm.result=this.mapToJson(this.map); console.log( this.mapToJson(this.map),' mapToJson(this.map)') this.$fetchPost('你的接口',this.saveTaskForm,'json').then(res=>{ if (res.code===0){ this.$message({ message:res.data, type:'success', }) this.initEvents();//数据刷新 }else{ this.$message.error("处理失败！") } }) this.dealTaskVisible = false;//关闭表单弹窗 },

搞定，嘻嘻！

补充：vue遍历Map，Map在vue中的使用方法

Map在vue中的使用方法：

html：遍历的时候要遍历两遍

js:

 data(){ return{ cur: "0", active:"0", courseTypeList: [], dateMap:{}, } }, mounted(){ // 后端返回json var jsonStr ={ "code": 0, "msg": "success", "data": { "courseTypeList": [ { "id": "16", "courseTypeName": "小一班" }, { "id": "15", "courseTypeName": "中一班" }, { "id": "14", "courseTypeName": "大一班" } ], "dateKeys": [ "二·11.26", "三·11.27", "四·11.28", "五·11.29", "六·11.30", "日·12.01", "一·12.02" ] } } // 遍历班级类型 for (var i = 0; i < jsonStr.data.courseTypeList.length; i++) { var courseTypeList = jsonStr.data.courseTypeList[i]; this.courseTypeList.push(courseTypeList) } // 遍历日期 //初始化Map对象 var dateMap = new Map(); for (var i = 0; i < jsonStr.data.dateKeys.length; i++) { var data = jsonStr.data.dateKeys[i]; //用split连在一起的字符串切割 "三·11.27" //使用set添加键值示例：m.set('小红', 30); dateMap.set(data.split("·")[0], data.split("·")[1]); } this.dateMap = dateMap; },

css:

 .ctNavbar{ display: flex; align-items: center; justify-content: space-between; text-align: center; .ctA{ padding: 10px 0; color: #202020; font-size: 1.5rem !important; border-bottom: 2px solid transparent; width: 33%; &.cur{ color: #BA0932; border-bottom: 2px solid #BA0932; } } } .date_navbar { width: 100%; display: flex; justify-content: space-between; align-items: center; a { width: 32px; -webkit-box-flex: 1; display: flex; justify-content: space-between; align-items: center; flex-direction: column; font-size: 9px; color: #6C6C6C; padding: 2px 5px; flex: 1; span { display: block; -webkit-box-flex: 1; } &.cur { background: #BA0932; color: #fff; border-radius: 16px; } } }

总结

到此这篇关于Vue中如何使用Map键值对传参的文章就介绍到这了,更多相关Vue用Map键值对传参内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

上一篇：elementui源码学习之仿写一个el-divider组件_vue.js_

下一篇：利用vue+elementUI设置省市县三级联动下拉列表框的详细过程_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网