vue 关于数组和对象的更新
在日常开发中,我们用的最多的就是 绑定数据
<div v-for="item in data" :key="item.id">
<!-- 内容 -->
</div>
如果你有ng的开发经验,假设 data 你要更新数据了
this.data=res.data;
但是这在vue中 并不会起到作用,DOM并没有触发变化。
vue不是已经实现的实时数据双向绑定,那么model层发生了变化之后,为什么view层没有更新呢???
数组检测更细变异的方法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
注意事项
由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
1. this.data[index] = res.data;
2. this.data.length = 0;
正确的操作方式
1.
Vue.$set(
this
.data, 1, {name:"huangenai",age:"22"})
2. vm.items.splice(0)
对象
还是由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除:
<script>
export default {
data(){
return {
userProfile: {
name: 'Anika'
}
user: {
name: "huangenai",
age:
}
}
},
mounted() {
this.$set(this.userProfile, 'age', )
this.user = Object.assign({}, this.user, {
age: ,
name: "huangenai"
});
}
}
</script>
此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。
如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。
vue 关于数组和对象的更新的更多相关文章
- Vue 改变数组中对象的属性不重新渲染View的解决方案
Vue 改变数组中对象的属性不重新渲染View的解决方案 在解决问题之前,我们先来了解下 vue响应性原理: Vue最显著的一个功能是响应系统-- 模型只是一个普通对象,修改对象则会更新视图.受到ja ...
- vue遍历数组和对象的方法以及他们之间的区别
前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中插值,因为那样即使能插入值,页面也不会重新渲染数据 一,vue遍历数组 1,使用vue数组变异方法 pop() 删除数组最后一 ...
- Vue 使用数组和对象控制Class
直接上代码: <!doctype html> <html lang="en"> <head> <meta charset="UT ...
- vue 保存数组和对象, 避免双向绑定影响
很多时候需要保存数据然后复用该数据,因vue的双向绑定总是不能保存原始数据 随笔记录解决方式 1. 不要把变量放置在data中 2. 保存至新的变量 object : let obj= Objec ...
- vue watch数组或者对象
1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console. ...
- Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新
一.为什么需要使用Vue.set? vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vu ...
- vue 数组和对象渲染问题
vue 数组和对象渲染问题 最近项目有点忙碌,遇到好多问题都没有总结(╥﹏╥),在开发过程中,取vuex中的数组渲染完成之后,再次修改数组的值,数据更新了,但是视图并没有更新.以为是数组更新的问题,后 ...
- 还原Vue.js的data内的数组和对象
最近学习Vue.js发现其为了实现对data内的数组和对象进行双向绑定,将数组和对象进行了封装. 如下的对象 todos: [ { id: 1, title: ...
- element vue Array数组和Map对象的添加与删除
使用场景: 一个后台系统中, 管理员要配置自定义字段后台要生成id和title,其他角色要使用自定义字段的表单, 添加数据, 但是每个要填写的对象的id 和title都是无法固定的,因此页面显示的ti ...
随机推荐
- 解决win系统无法安装.NET Framework 4.0 4.6 原因是HRESULT0xc8000222
1.开始----- 运行------- cmd ----- 键入net stop WuAuServ回车(停止windows update服务) 2.开始----- 运行----键入%windir%回车 ...
- ASP.NET MVC4添加区域视图 找到多个与名为“home”的控制器匹配的类型
今天在项目中遇到一个问题,在MVC下想建立一个区域的后台Boss视图,出现了"找到多个与名为“home”的控制器匹配的类型"的问题,希望下面的解决方案能够帮助到大家 这是网站的整体 ...
- Effective C++ 笔记:条款 33 避免继承导致的名称遮掩
Avoid hiding inherited names 作用域(scopes)所带来的名称二义性,c++编译器会寻找指涉(refer to)的对象并实现名称遮掩规则(name-hiding rule ...
- UTF-8的BOM含义
BOM的介绍 在github上写md文件的时候,发现生成自己blog时,报出一个错误是让使用UTF-8编码,然后在Notepad++上把文件转成UTF-8时,发现菜单中有"UTF-8无BOM ...
- LCD调试
(1) 液晶显示模式 并行:MCU接口.RGB接口.Vysnc接口 串行:SPI接口.MDDI接口 (2) 屏幕颜色 实质上即为色阶的概念.色阶是表示手机液晶显示屏亮度强弱的指数标准,也就是通常所说的 ...
- JSP 前端的一些应用
Ext标签库 一.Ext.VeiwPort 代表整个浏览器显示区域,该对象渲染到页面的body 区域,并会随着浏览器显示区域的大小自动改变,一个页面中只能有一个ViewPort 实例. <scr ...
- tarjan算法总结
部分内容引自https://www.cnblogs.com/stxy-ferryman/p/7779347.html Tarjan算法不是一个算法而是一类算法 1.求取强连通分量 强连通分量————有 ...
- docker zabbix
1.zabbix-mysql 数据库 sudo docker pull zabbix/zabbix-server-mysql sudo docker run --name some-zabbix-se ...
- radio点击一下选中,再点击恢复未选状态
radio点击一下选中,再点击恢复未选状态 实现方式1: <input type="radio" id="cat" name="ca ...
- Hive数据仓库之快速入门
Hive定位:ETL(数据仓库)工具 将数据从来源端经过抽取(extract).转换(transform).加载(load)至目的端的工具,如像:kettle 有关Hive数据导入导出mysql的问题 ...