Vue中如何使用Map鍵值對(duì)傳參詳析

更新時(shí)間：2022年08月03日 15:30:16 作者：I'm寫代碼

最近在做一個(gè)vue的項(xiàng)目,碰到一點(diǎn)關(guān)于Map鍵值對(duì)傳參的問題,下面這篇文章主要給大家介紹了關(guān)于Vue中如何使用Map鍵值對(duì)傳參的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

Vue里使用Map鍵值對(duì)傳參

問題描述：在參數(shù)傳遞時(shí)時(shí)候Map鍵值對(duì)key:value的形式進(jìn)行傳參。

1、date數(shù)據(jù)區(qū)定義聲明map變量和中間數(shù)據(jù)變量temp：

data(){
     return{
          //其他代碼
           map:'',
           temp:[]
            }
        },

2、methods方法區(qū)接口傳值：聲明map為Map變量，接收接口傳過來的key數(shù)據(jù)生成表單項(xiàng)數(shù)據(jù)項(xiàng):

this.map=new Map()

即：

//點(diǎn)擊待辦任務(wù)，去處理待辦任務(wù) 填寫待辦表單
            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表單數(shù)據(jù)綁定，且根據(jù)for循環(huán)index值用temp數(shù)據(jù)進(jìn)行數(shù)據(jù)綁定。

<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="請(qǐng)輸入" clearable @change="mapUpdate(item[0],index)"></el-input>
    </div>
</el-form-item>

4、mapUpdate方法將temp數(shù)組接收的值對(duì)Map進(jìn)行key:value傳值：

mapUpdate(key,index){
                this.map.set(key,this.temp[index]);
                console.log(key)
                console.log(this.map)
            }

5、mapToJson方法對(duì)map進(jìn)行json數(shù)據(jù)格式轉(zhuǎn)換：

mapToJson(map) {
        return JSON.stringify(this.strMapToObj(map));
    },

6、map數(shù)據(jù)賦值給接口參數(shù)，進(jìn)行傳參：

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();//數(shù)據(jù)刷新
                    }else{
                        this.$message.error("處理失?。?)
                    }
                })
                this.dealTaskVisible = false;//關(guān)閉表單彈窗
            },

搞定，嘻嘻！

補(bǔ)充：vue遍歷Map，Map在vue中的使用方法

Map在vue中的使用方法：

html：遍歷的時(shí)候要遍歷兩遍

<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"
			        ]
			    }
			}
            // 遍歷班級(jí)類型
            for (var i = 0; i < jsonStr.data.courseTypeList.length; i++) {
                var courseTypeList = jsonStr.data.courseTypeList[i];
                this.courseTypeList.push(courseTypeList)
            }

            // 遍歷日期
            //初始化Map對(duì)象
            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;
            }
        }
    }