element vue Array数组和Map对象的添加与删除

使用场景:

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

原文地址:https://www.cnblogs.com/yysbolg/p/9957310.html

时间: 2024-11-02 22:11:45

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

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

一.为什么需要使用Vue.set? vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vue.$set(target,key,value):可以动态的给数组.对象添加和修改数据,并更新视图中数据的显示. vue在构造函数new Vue()时,就通过Object.defineProperty中的getter和setter 这两个方法,完成了对数据的绑定.所以直接通过vm.arr[1] =

Array数组对象方法

Array 对象方法 方法 描述 concat() 连接两个或更多的数组,并返回结果. copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中. entries() 返回数组的可迭代对象. every() 检测数值元素的每个元素是否都符合条件. fill() 使用一个固定值来填充数组. filter() 检测数值元素,并返回符合条件所有元素的数组. find() 返回符合传入测试(函数)条件的数组元素. findIndex() 返回符合传入测试(函数)条件的数组元素索引. f

Vue 改变数组中对象的属性不重新渲染View的解决方案

在解决问题之前,我们先来了解下 vue响应性原理: Vue最显著的一个功能是响应系统-- 模型只是一个普通对象,修改对象则会更新视图.受到javascript的限制,Vue不能检测到对象属性的添加或删除,因为vue在初始化实列时将属性转为getter/setter,所以属性必须在data对象上才能让vue转换它.但是vue可以使用 Vue.set(object, key, value)方法将响应属性添加到嵌套的对象上:如下代码: Vue.set(obj, '_isHover', true); 或

Java Script基础(八) Array数组对象

Java Script基础(八) Array数组对象 一.Array数组 JavaScript中的数组也是具有相同数据类型的一个或者多个值得集合.用法和Java中的数组类似. Array对象的常用属性和方法: 属性: length:获取数组的长度: 方法: join():把数组中的所有元素放入一个字符串中,通过分隔符进行分隔. sort():对数组元素进行排序. 1.创建数组 语法: var a1 = new Array();           //创建一个数组,长度为0: var a2 = 

js基础,Array 数组对象、BOM 浏览器对象模型

Array 数组对象 定义数组的 3种方式 var week = new Array(); var week = new Array(‘星期一’ , ‘星期二, ‘星期三’); var week = (‘星期一’ , ‘星期二, ‘星期三’); 常用方法: 获取数组的长度 .length: alert(week.length); 获取数组下标所对应的值: alert(week[0]); 数组元素添加: 将一个或多个新元素添加到数组结尾,并返回数组新长度 var week_len = week.p

Array 数组对象

Array 数组对象 数组对象是一个对象的集合,里边的对象可以是不同类型的.数组的每一个成员对象都有一个“下标”,用来表示它在数组中的位置,是从零开始的. 注意: 数组的下标用方括号括起来,从0开始. length 用法:<数组对象>.length:返回:数组的长度,即数组里有多少个元素.它等于数组里最后一个元素的下标加一. 数组方法: 指定分隔符连接数组元素join() join()方法用于把数组中的所有元素放入一个字符串.元素是通过指定的分隔符进行分隔的. 语法: arrayObject.

关于 vue 不能 watch 数组变化 和 对象变化的解决方案

原文地址:关于 vue 不能 watch 数组变化 和 对象变化的解决方案 vue 监听数组和对象的变化 vue 监听数组 vue 实际上可以监听数组变化,比如: data () { return { watchArr: [], }; }, watchArr (newVal) { console.log('监听:' + newVal); }, created () { setTimeout(() => { this.watchArr = [1, 2, 3]; }, 1000); }, 再如使用

vue 关于数组和对象的更新

在日常开发中,我们用的最多的就是 绑定数据 <div v-for="item in data" :key="item.id"> <!-- 内容 --></div> 如果你有ng的开发经验,假设 data 你要更新数据了 this.data=res.data; 但是这在vue中 并不会起到作用,DOM并没有触发变化. vue不是已经实现的实时数据双向绑定,那么model层发生了变化之后,为什么view层没有更新呢??? 看官网 这里

vue遍历数组和对象的方法以及他们之间的区别

前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中加值,因为那样即使能加入值页面也不会跟着改变 一,vue遍历数组 1,使用vue数组变异方法 pops 删除数组租后一项 push 往数组里面增加一项 shift 删除数组第一项 unshift 往数组第一项里面加一线内容 splice 数组截取 sort 数组排序 reverse 对数组取反 2,数组的引用 3,vue set方法 二,vue遍历对象 1,对象引用 2,set方法 由于时间问题下回仔细说明,谢谢 原文地址:h