Vue中如何使用Map键值对传参详析
短信预约 -IT技能 免费直播动态提醒
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键值对传参内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
