使用场景:

一个后台系统中, 管理员要配置自定义字段后台要生成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. Drools规则引擎入门指南(一)

    最近项目需要增加风控系统,在经过一番调研以后决定使用Drools规则引擎.因为项目是基于SpringCloud的架构,所以此次学习使用了SpringBoot2.0版本结合Drools7.14.0.Fi ...

  2. [Swift]创建CoreData的两种方式

    一.CoreData介绍 CoreData主要分为两部分: 上层是模型层,模型层有NSManagedObjectContext上下文管理着, 底层则是由SQLite实现的持久化部分,通过NSPersi ...

  3. 使用redis配置分布式session

    1. spring-redis-session 1.1. 配置 /** * @author laoliangliang * @date 2018/12/21 17:19 */ @Configurati ...

  4. Matplotlib 使用 - 《Python 数据科学手册》学习笔记

    一.引入 import matplotlib as mpl import matplotlib.pyplot as plt 二.配置 1.画图接口 Matplotlib 有两种画图接口: (1)一个是 ...

  5. php 中构造函数和析构函数

    构造函数: 在对象实例化时被调用,一个类中只能有一个构造函数,在类中起初始化的作用. 析构函数: 在对象结束时被自动调用. 话不多说,用一段代码来说明两者的区别: <?php //定义一个类 c ...

  6. 什么是SQL

    SQL是用于访问和处理数据库的标准的计算机语言 SQL是 访问 .处理数据库中的数据 ,这类数据库 包括Oracle, Sybase, SQL Server, DB2,Accesss等等 类型的数据库 ...

  7. 工作随笔—static关键字

    问题:在声明一个变量的时候,添加static与不添加static区别在哪里? 回答:在声明一个变量的时候,添加static关键字,那么这个变量就会在保存在代码器里面,而不会保存到堆里面去了,当其余的对 ...

  8. 【array】数组复习

    一.定义 数组:一组相关变量的集合. 二.初始化 三种方法初始化: int [] intArray = new int[4]; //必须表明容量才表示已经初始化,不带的话会报错未初始化 String ...

  9. 删除github上面的项目

    1.进入github 2.点击Repositories,看到你所有的repository 3.点击进入你想要删除的repository,点击settings 4.在options选项中,下拉到底看到“ ...

  10. Python快速学习05:面向对象

    系列文章:[传送门] Python对象是Python语言的核心部分.Python使用类(class)和对象(object),进行面向对象(object-oriented programming,简称O ...