Vue里使用Map键值对传参

Posted 2022-03-25 程序员超时空

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;//关闭表单弹窗
            ,

搞定，嘻嘻！