Vue里使用Map键值对传参
Vue里使用Map键值对传参问题描述:在参数传递时时候Map键值对key:value的形式进行传参。1、date数据区定义声明map变量和中间数据变量temp:data(){return{//其他代码map:'',temp:[]}},2、methods方法区接口传值:声明map为Map变量,接收接口传过来的key数据生成表单项数据项:this.map=new Map()
·
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;//关闭表单弹窗
},
搞定,嘻嘻!
更多推荐
已为社区贡献15条内容
所有评论(0)