Vue里使用Map键值对传参_I'm写代码的博客-程序员宝宝_vuemap获取键值对

技术标签: vue  javascript  

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

搞定,嘻嘻!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_41497443/article/details/109567523

智能推荐

cocosCreator组件函数详解cc.Component_a384501497的博客-程序员宝宝

组件入口函数onLoad()在组件加载的时候运行可以在onLoad里访问场景的节点和数据,这时场景的节点和数据都已经准备好了start()组件在第一次刷新之前调用update(dt)组件每次刷新的时候调用,会在动画更新之前执行dt是距离上次一刷新的时间laterUpdate(dt)组件每次刷新的时候调用,会在动画更新之后调用onEnable()组件在激活的...

C++ string类、vector类 常用函数_Grit_Wang的博客-程序员宝宝_vector函数

基础应用vector&lt;int&gt; a; //声明一个int型向量avector&lt;int&gt; a(10); //声明一个初始大小为10的向量vector&lt;int&gt; a(10, 1); //声明一个初始大小为10且初始值都为1的向量 vector&lt;int&gt; b(a); //声明并用向量a初始化向量bvector&lt;...

Zabbix5系列-监控Windows主机 (三)-CPU温度自动发现_Halyace的博客-程序员宝宝_zabbix监控cpu温度

参考另一篇博文配置Windows代理程序Zabbix5系列-监控Windows主机 (三)2.1 由于Windows无法直接读取温度信息,所以用C#写了个脚本调用OpenHardwareMonitor库来进行温度读取,并匹配自动发现编译好的程序:CPU温度zabbix自动发现脚本源代码:2.2 复制程序至agent2安装目录2.3 打开命令提示符测试读取2.4 打开zabbix_agent2.conf配置文件增加用户自定义参数参考:用户自定义参数自定义参数:2.5 打开命令提示符重启服务

STM32——串口通信原理_骤雨南山下的博客-程序员宝宝_串口通信原理图

STM32——串口通信一、硬件部分1、RS232标准2、USB转串口(TTL)3、原生的串口到串口(TTL-&gt;TTL)二、串口通信协议三、STM32串口通信功能框图一、硬件部分RS232通信和TTL的区别只有一点,那就是在于硬件机制(电平),如果需要做RS232和TTL的转换,那就需要借助转换芯片来完成。TTLRS2320-5V-15 - 15V高电平置1,低电平置0高电平置0,低电平置11、RS232标准2、USB转串口(TTL)3、原生的串口到串

ThinkSystem SR650 BMC管理口配置_qq_36525172的博客-程序员宝宝_sr650管理口ip地址

配置步骤:将自己电脑直连服务器BMC管理网口,给自己电脑IP配置成“192.168.70.111/24”不需要设置网关。在浏览器输入https://192.168.70.125,账号:USERID,密码:PASSW0RD(其中o是数字0)

Python网络编程——修改套接字发送和接收的缓冲区大小_Mike宋的博客-程序员宝宝_接收套接字缓冲区大小

https://www.cnblogs.com/ouyangyixuan/p/5894542.html很多情况下,默认的套接字缓冲区大小可能不够用。此时,可以将默认的套接字缓冲区大小改成一个更合适的值。1. 代码 1 # ! /usr/bin/env python 2 # -*- coding: utf-8 -*- 3 4 import socket 5 6 ...

随便推点

面向对象、面向切面、面向连接...“面向”和“抽象”的意思_徐乙的博客-程序员宝宝

面向对象、面向切面、面向连接、面向报文...等等,都带了一个面向。这个时候,都开始分析,对象,切面了。其实,应该先分析,面向。面向的意思就是,最小单位。面向对象,就说明,对象是最小的单位。面向切面,就说明,切面是最小的单位。...所以,理解了面向,你就可以理解所有的面向...相关的东西。此外,编程即抽象

内网渗透--powershell简介_shayebudon的博客-程序员宝宝_powershell内网渗透

windows powershell基础Powershell 是运行在windows机器上实现系统和应用程序管理自动化的命令行脚本环境。你可以把它看成是命令行提示符cmd.exe的扩充powershell命令和参数不区分大小写

【异常】IOException parsing XML document from class path resource [xxx.xml]_蒂法洛克的博客-程序员宝宝_ioexception parsing xml

1、IDEA导入项目运行出现异常:org.springframework.beans.factory.BeanDefinitionStoreException: IOException parsing XML document from class path resource [ApplicationContext.xml]; nested exception is java.io.File...

构建逻辑回归-实例_ay_silence的博客-程序员宝宝

逻辑回归逻辑回归是应用非常广泛的一个分类机器学习算法,它将数据拟合到一个logit函数(或者叫做logistic函数)中,从而能够完成对事件发生的概率进行预测。构建逻辑回归模型步骤:导入数据预处理数据对不平衡的数据进行下采样(或者过采样)处理把处理之后的数据进行切分,切分为训训练集和测试集对训练集进行交叉验证,同时寻找最佳的正则化参数以减少过拟合使用最佳的正则化参数对处理之后的数...

sphinx 安装使用_屈强龙的博客-程序员宝宝

一.linux(centos)下安装源码包1.下载 wget http://sphinxsearch.com/files/sphinx-2.3.1-beta.tar.gz2.安装  切换目录到  /usr/local/src 目录下 执行上面的命令1)解压---&amp;gt;切换进入解压后的包---&amp;gt;2)编译前准备     安装工具包命令:yum -y instal...

TensorFlow图像分类:如何构建分类器_架构师小秘圈的博客-程序员宝宝

导言图像分类对于我们来说是一件非常容易的事情,但是对于一台机器来说,在人工智能和深度学习广泛使用之前,这是一项艰巨的任务。自动驾驶汽车能够实时检测物体并采取相应必要的行动...

推荐文章

热门文章

相关标签