Vue里使用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;//关闭表单弹窗
            },

搞定，嘻嘻！