Vue中无法检测到数组的变动
本周在写项目中遇到修改数组中的值时,视图无变化问题。在查阅Vue官方文档后了解到,由于由JavaScript 的限制,Vue 不能检测以下数组的变动:
- 当利用索引直接设置一个数组项时,例如:
vm.items[indexOfItem] = newValue
- 当修改数组的长度时,例如:
vm.items.length = newLength
例如:
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
为了解决第一类问题,以下两种方式都可以实现和vm.items[indexOfItem] = newValue
相同的效果,同时也将在响应式系统内触发状态更新:
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
也可以使用 vm.$set
实例方法,该方法是全局方法 Vue.set
的一个别名:
vm.$set(vm.items, indexOfItem, newValue)
为了解决第二类问题,也可以使用splice
:
vm.items.splice(newLength)
Vue中无法检测到数组的变动的更多相关文章
- vue中使用v-if判断数组长度是出现length报错
在vue中使用v-if判断数组的长度时出现报错 <el-collapse-item :key="index" v-if="data.childrens.length ...
- Vue指令(二)--数组的变动
1.数组更新数据,引起视图更新 数据驱动:数据发生变化,引起视图的变化 Vue在检测数组变化的时候,并不是直接重新渲染整个列表,而是最大化的复用Dom元素. 替换的数组中,含有相同元素的项是不会被重新 ...
- vue中通过定义的数组循环将img的src引入图片却不显示图片问题解决方法
需要前端循环图片数组将其放到页面中去. 需要将src渲染到页面中,如果单纯写src的路径会出现不显示图片的问题 因为图片路径在assets,所以需要require一下.
- vue中的v-if查找数组中最后一个,给他加上新的样式
vue: var app=new Vue({ el:".xiaomi", data: { typeInfo: [{img:"image/type/phone_1.webp ...
- vue中watch检测到不到对象属性的变化的解决方法
watch: { option: { handler(newVal) { console.log(newVal); }, deep: true, immediate: true } }, 需要深层wa ...
- vue中数组变动更新检测
Vue 包含两种观察数组的方法分别如下 1.变异方法 顾名思义,变异方法会改变被这些方法调用的原始数组,它们也将会触发视图更新,这些方法如下 push() pop() shift() unshift( ...
- Vue中数组元素被替换,页面没有动态展示
原始代码 页面没有相应goodsList替换,打印goodsList数据已经被替换: (借用https://www.cnblogs.com/belongs-to-qinghua/p/11112613. ...
- vue中,对象数组多层嵌套时,更新数据更新页面
vue中的对象和数组的元素直接赋值修改时,是不能响应到view中去的 1.对象更新 this.a={title:'列表1’}; this.a.title='列表2’; <h1>{{a.ti ...
- vue中的一些知识点--多看文档
重温vue,一些知识点简单记录. 1.我们都知道当数据变化时,视图会重新渲染.注意:只有当vue实例被创建时,data中存在的属性才是响应式的.后续新添加的属性不会触发视图变化. 使用 Object. ...
随机推荐
- nyoj 48-小明的调查作业(set)
48-小明的调查作业 内存限制:64MB 时间限制:1000ms Special Judge: No accepted:15 submit:29 题目描述: 小明的老师布置了一份调查作业,小明想在学校 ...
- IBM-X3850-4U诊断面板信息
IBM X3850 4U 指示灯 描述 OVERSPEC 没有足够的电量为系统供电.NONRED和LOG指示灯可能也点亮 PS 一个电源故障或者被电源未插 LINK 保留 CPU CPU出现故障.丢失 ...
- ZeroC ICE的远程调用框架 ThreadPool
ThreadPool提供Reactor/Proactor服务,并且强偶合了Reactor(反应器)/Proactor(前摄器).不同于Reactor/Proactor使用线程池 进行事件处理的设计.如 ...
- convert svn repo to git
https://john.albin.net/git/convert-subversion-to-git 1. 抓取Log 在linux 上做的,其余是在win上做的. 2. svn co svn:/ ...
- html——标签基础
img标签:使用 src="xxx" 来链接图片 当图片显示不出来的时候 显示alt 中定义的内容 当图片显示了出来 鼠标移动到图片上的时候 显示的是 title 中定义的 ...
- Error : Program type already present: android.support.design.widget.CoordinatorLayout$
背景 因为公司一个app项目需要扩展,因为功能较多且较完整的流程与业务,而且和以前的业务关系不大,所以我整合到了 另外一个分包中(代号:newFunc,请注意是代号)进行依赖. 当我写完这部分业务开始 ...
- Spring Cloud - Zuul添加过滤器
Zuul作为网关的其中一个重要功能,就是实现请求的鉴权.而这个动作我们往往是通过Zuul提供的过滤器来实现的. 一.过滤器方法的作用 想要使用Zuul实现过滤功能,我们需要自定义一个类继承ZuulFi ...
- 全网最通俗易懂的Kafka入门!
前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 在这篇之前已经写过两篇基础文章了,强烈建议先去阅读: ...
- Mac卸载mysql并安装mysql升级到8.0.13版本
引言 今天mysql升级到8.0.13版本,遇到了很多问题,在此进行总结方便以后查看. 卸载mysql brew uninstall mysql sudo rm /usr/local/mysql su ...
- 【Android - 控件】之可悬浮列表StickyHeadersRecyclerView
这是timehop的GitHub上发表的一个控件框架,大家可以去参考它的[GitHub]. 这里先贴出GitHub上提供的效果图: 要使用这个框架,我们需要首先导入它的依赖: compile 'com ...