Vue中如何使用Map键值对传参详析

目录
  • Vue里使用Map键值对传参
  • 补充:vue遍历Map,Map在vue中的使用方法
  • 总结

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键值对传参内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue中如何使用Map键值对传参详析

    目录 Vue里使用Map键值对传参 补充:vue遍历Map,Map在vue中的使用方法 总结 Vue里使用Map键值对传参 问题描述:在参数传递时时候Map键值对key:value的形式进行传参. 1.date数据区定义声明map变量和中间数据变量temp: data(){ return{ //其他代码 map:'', temp:[] } }, 2.methods方法区接口传值:声明map为Map变量,接收接口传过来的key数据生成表单项数据项: this.map=new Map() 即: //

  • Vue中插槽slot的使用方法与应用场景详析

    什么是插槽? 我们知道在Vue中 Child 组件的标签 的中间是不可以包着什么的 . 可是往往在很多时候我们在使用组件的时候总想在组件间外面自定义一些标签,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+: 插槽,其实就相当于占位符.它在组件中给你的HTML模板占了一个位置,让你来传入一些东西.插槽又分为 匿名插槽.具名插槽.作用域插槽. 在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令).它取代了 slot 和 slot-sc

  • Go语言遍历map实现(访问map中的每一个键值对)

    map 的遍历过程使用 for range 循环完成,代码如下: scene := make(map[string]int) scene["route"] = 66 scene["brazil"] = 4 scene["china"] = 960 for k, v := range scene { fmt.Println(k, v) } 遍历对于Go语言的很多对象来说都是差不多的,直接使用 for range 语法即可,遍历时,可以同时获得键和值

  • Java将json对象转换为map键值对案例详解

    本文的目的是把json串转成map键值对存储,而且只存储叶节点的数据 比如json数据如下: {responseHeader:{status:0,QTime:0},spellcheck:{suggestions:{中国:{numFound:9,startOffset:0,endOffset:2,suggestion:[中国工商银行, 中国人民, 中国国际, 中国农业, 中国市场, 中国经济, 中国人, 中国广播, 中国文化]}},collations:{collation:中国工商银行}}} 如

  • Android中Property模块的键值设置

    Android中Property模块的键值设置 Prop模块是保存少量的全局共享信息,其保存的数据具有信息量少,跨进程共享数据等特性:每一条信息包含两个属性,键名和键名对应的键值,例如: ro.product.locale.language=en "Ro.product.locale.language"表示本产品本地语言,表示该条信息的名字,"en"表示该条信息的取值为英文,这样任何一个应用程序就知道本机使用的语言情况.在接口设计时也需要有两个参数,name和val

  • Java 把json对象转成map键值对的方法

    工具方法: 本文的目的是把json串转成map键值对存储,而且只存储叶节点的数据 maven 引用jar包版本: <dependency> <groupId>org.json</groupId> <artifactId>json</artifactId> <version>20090211</version> </dependency> 工具类: package com.baofoo.admin.test; /

  • vue App.vue中的公共组件改变值触发其他组件或.vue页面监听

    业务场景重现 现在我的App.vue里面有一个头部的公共组件,头部组件里有一个输入框,当我输入词条时,将词条传进App.vue里的<router-view>里的.vue页面,并进行查询获取数据 解决思路如下: 1.如何拿到头部的词条 2.当词条改变时如何触发.vue里的请求数据事件 解决方案 我是用vuex数据仓库来存储词条的,当词条改变时,修改数据仓库里的词条 然后在.vue页面里监听这个词条,当词条改变时触发请求数据的事件 代码 数据仓库store.js import Vue from '

  • vue中监听返回键问题

    问题:在项目中,我们常常有需求,当用户在填写表单时,点击返回的时候,我们希望加一个弹窗,确认离开吗,确认将保存为草稿 解决方案:利用 H5的 pushstate(个人理解为增加页面栈)特性与onpopup事件 分析:pushstate 从该方法名我们可以知道 是增加某种状态,会为history对象的length增加长度, 点击返回键的时候会触发onpopup事件(可以联想到 pop其实是数组删除的最后一个元素,符合  '栈' 的思想): onpopup触发返回上一页,而 pushstate仅仅是

  • Redis中键值过期操作示例详解

    1.过期设置 Redis 中设置过期时间主要通过以下四种方式: expire key seconds:设置 key 在 n 秒后过期: pexpire key milliseconds:设置 key 在 n 毫秒后过期: expireat key timestamp:设置 key 在某个时间戳(精确到秒)之后过期: pexpireat key millisecondsTimestamp:设置 key 在某个时间戳(精确到毫秒)之后过期: 下面分别来看以上这些命令的具体实现. 1)expire:N

  • 在vue中实现简单页面逆传值的方法

    [需求] 要实现的需求很简单,页面从A -> B,用户在B触发操作,将一些数据带回到A页面,在网上找了好久也只看到有人问,但总找不到很好答案.要实现的效果图如下: [联想] 在 ios 开发中,页面跳转 A -> B -> C,到 C 页面后,内存中一直存储着 A 和 B 页面的数据和状态,通过导航堆栈遍历数组可以拿到之前的页面进行修改赋值等,另外还有代理,block传值等操作. vue是一个单页应用,轻量,并且不会重复下载数据.当它从一个页面跳转到另一个页面时,原来的页面的vue实例和

随机推荐