使用场景:

一个后台系统中, 管理员要配置自定义字段后台要生成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. vue模式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 全栈开发工程师微信小程序-中(中)

    全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...

  3. 微信小程序web-view实例

    微信小程序web-view实例 index.js //index.js //获取应用实例 const app = getApp() Page({ /** * 页面的初始数据 */ data: { }, ...

  4. Mybatis Cause: java.lang.ClassNotFoundException: Cannot find class:

    MyBatis原因:java.lang.ClassNotFoundException:找不到类. 原因你的xml文件中的返回类型错误,没有找到这个类. 检查类名是否正确,检查路径是否正确. 在复制my ...

  5. C/C++结构体成员偏移量获取

    分析代码节选自muduo. 以下代码通过offsetof获取sin_family在sockaddr_in6中的字段偏移量. static_assert(offsetof(sockaddr_in6, s ...

  6. 微信支付提示System:access_denied

    原因: 发起授权请求的页面必须是在授权目录下的页面,而不能是存在与子目录中.否则会返回错误,android返回“System:Access_denied”,ios返回"access_cont ...

  7. 破解第三课 关键跳和关键CALL

    课前自泼凉水: 前两课的介绍的方法,不管是NOP填充还是JUM的无条件跳转,其实都有极大的局限性. 甚至单纯就效果而言,几乎无用. 且不说利用OD搜索关键字本身就很难搜得到. 就现在的软件保护而言,也 ...

  8. Java核心技术及面试指南 2.3.6 String相关的面试题答案

    2.3.6.1 String是最基本的数据类型吗?能不能被继承? String不能被继承,它是一个对象 2.3.6.2 String s = new String("xyz");创 ...

  9. Android--UI之ViewStub

    前言 按照最近博客的路线,继续讲Android的UI开发.今天讲解一下ViewStub控件,惰性装载控件.在本篇博客中,将了解到ViewStub的常用属性.方法,以及注意事项.最后将以一个简单的Dem ...

  10. 全网最全的Windows下Anaconda2 / Anaconda3里正确下载安装OpenCV(离线方式和在线方式)(图文详解)

    不多说,直接上干货! 说明: Anaconda2-5.0.0-Windows-x86_64.exe安装下来,默认的Python2.7 Anaconda3-4.2.0-Windows-x86_64.ex ...