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<this.getTaskForm.length;i ){
this.map.set(this.getTaskForm[i].fieldName,'');
}
console.log(this.getTaskForm,'集合集合')
console.log(this.map,'map集合')
})
this.taskNameList.push(this.$refs.taskName[index].innerHTML)
this.taskIdList.push(this.$refs.taskId[index].innerHTML)
},
3、form表单数据绑定，且根据for循环index值用temp数据进行数据绑定。
<el-form-item v-for="(item,index) in map" :key="item[0]" :label="item[0]">
<div class="dealTaskItem">
<el-input @input="updateForce($event)" v-model ="temp[index]" class="dateTaskCss" placeholder="请输入" clearable @change="mapUpdate(item[0],index)"></el-input>
</div>
</el-form-item>
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：遍历的时候要遍历两遍
<template>
<div class="course">
<div class="">
<div class="pt0 ctRow">
<ul class="ctNavbar">
<li class="ctA"
v-for="(item,index) in courseTypeList"
:key="item.id"
@click="selectedCur(index)" :class="{ cur:cur == index }"
:data-id="item.id"
>
{{item.courseTypeName}}
</li>
</ul>
</div>
<!--Map遍历两遍 -->
<div class="ctRow date_navbar">
<a href="javascript:;"
v-for="(item,index) in dateMap"
:key="index"
@click="dataCur(index)" :class="{ cur:active == index }"
>
<span v-for="data in item">{{data}}</span>
</a>
</div>
</div>
</div>
</template>
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键值对传参内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！