使用场景:

一个后台系统中, 管理员要配置自定义字段后台要生成id和title,其他角色要使用自定义字段的表单, 添加数据, 但是每个要填写的对象的id 和title都是无法固定的,因此页面显示的title 和id都需要自定义数字和map对象来实现,vue 的数值动态添加内容需要特定的方式:

1.定义一个vue空数组与一个vue 空Map对象:

data: function() {
  return{
    arrayData:[],//自定义字段中下拉框的数组
    mapData:{},//自定义字段提交保存数据的map
    dbData:[
      {}
    ],//数据库查询出来的自定义字段     mapKey:'age',
    mapValue:29,
    arrayIndex:0,
    arrayValue:'中国',
  };
}

2.赋值对象:

Map 赋值: Vue.set(this.mapData,this.mapkey,this.mapValue);
Array 赋值: Vue.set(this.arrayData,this.arrayIndex,this.arrayValue);

element vue Array数组和Map对象的添加与删除的更多相关文章

  1. Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新

    一.为什么需要使用Vue.set? vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vu ...

  2. Vue中组件化编码 完成任务的添加、删除、统计、勾选需求(实战练习三完结)

    上一个章节实现数据在组件之间的传递 .这一章主要是完成添加任务到任务栏.删除任务栏.统计任务完成情况.主要还是参数在各个组件之间的传递. 上一章节的链接地址:https://blog.csdn.net ...

  3. 白鹭引擎 - 对象的添加与删除 ( 开关效果 addChild, removeChild )

    class Main extends egret.DisplayObjectContainer { /** * Main 类构造器, 初始化的时候自动执行, ( 子类的构造函数必须调用父类的构造函数 ...

  4. vue根据数组对象中某个唯一标识去重

    由于在vue中,会自动在数组和对象中加入_obser__观察者模式的一些属性,所以直接用数组的filter去重(下面这种),indexOf不能准确识别 var arr = [1, 2, 2, 3, 4 ...

  5. for 循环 和 Array 数组对象

    博客地址:https://ainyi.com/12 for 循环 和 Array 数组对象方法 for for-in for-of forEach效率比较 - 四种循环,遍历长度为 1000000 的 ...

  6. JavaScript中的内置对象-8--1.Array(数组)-Array构造函数; 数组的栈方法; 数组的转换方法; 数组的操作方法; 删除-插入-替换数组项; ECMAScript为数组实例添加的两个位置方法;

    JavaScript内置对象-1Array(数组) 学习目标 1.掌握任何创建数组 2.掌握数值元素的读和写 3.掌握数组的length属性 如何创建数组 创建数组的基本方式有两种: 1.使用Arra ...

  7. 将Json对象数组转化成JS Array数组

    private format(cards:any):Array<any>{ var result = new Array(); cards.forEach(element => { ...

  8. JavaScript高级编程——Array数组迭代(every()、filter()、foreach()、map()、some(),归并(reduce() 和reduceRight() ))

    JavaScript高级编程——Array数组迭代(every().filter().foreach().map().some(),归并(reduce() 和reduceRight() )) < ...

  9. es6中对象转数组,转map

    //对象转数组let array = Object.keys(userPermission).map(key=> userPermission[key]) console.log(array) ...

随机推荐

  1. Java核心技术卷一基础知识-第2章-Java程序设计环境-读书笔记

    第2章 Java程序设计环境 本章内容: 安装Java开发工具箱 使用集成开发环境 选择开发环境 运行图形化应用程序 使用命令行工具 建立并运行applet本章主要介绍如何安装Java开发工具箱(JD ...

  2. Day4:html和css

    Day4:html和css 规范注意 链接里面不能再放链接. a里面可以放入块级元素. 空格规范 选择器与{之间必须包含空格. 如: .class {} 属性名与之后的:符号之间不允许包含空格, 而: ...

  3. 使用Java面向对象单词必备

    第一章 class   班级,用声明类 object     目标,整个程序集对大 static  静态的 final  不可更改的,用声明常量 private  私有的,用访问权限 public  ...

  4. 【MySQL】当前读、快照读、MVCC

    当前读: select...lock in share mode (共享读锁) select...for update update , delete , insert 当前读, 读取的是最新版本, ...

  5. JSTL 和 EL

    EL表达式   Expression Language 语法${作用域中的值} 使用EL表达式时,需要在page标签中写上isELIgnored="false",否则EL表达式不生 ...

  6. Python的GUI编程(TK)

    TK在大多数 Unix平台.Windows平台和Macintosh系统都是预装好的,TKinter 模块是 Tk GUI 套件的标准Python接口.可实现Python的GUI编程. Tkinter模 ...

  7. H5在WebView上开发小结

    背景 来自我司业务方要求,需开发一款APP.但由于时间限制,只能采取套壳app方式,即原生app内嵌webview展示前端页面.本文主要记述JavaScript与原生app间通信,以及内嵌webvie ...

  8. queue源码

    queue概述 queue是一种先进先出的数据结构,允许新增元素.移除元素,queue只允许从底端加入元素,从顶端移除元素,不允许有遍历行为. queue定义 以某种既有容器作为底部结构,将其接口改变 ...

  9. Kubernetes 中的核心组件与基本对象概述

    Kubernetes 是 Google 基于 Borg 开源的容器编排调度,用于管理容器集群自动化部署.扩容以及运维的开源平台.作为云原生计算基金会 CNCF(Cloud Native Computi ...

  10. Elasticsearch基本概念及核心配置文件详解

    Elasticsearch5.X,下列的是Elasticsearch2.X系类配置,其实很多配置都是相互兼容的 1. 配置文件 config/elasticsearch.yml 主配置文件 confi ...