vue数据绑定数组,改变元素时不更新view问题
关于这个问题,官网上说的很清楚官方文档
写个例子
HTML
<body>
<div class="box">
<div v-for="aa in aas">{{aa}}</div>
<button @click="change">变数据 </button>
</div>
</body>
js
var vm = new Vue({
el:".box",
data:{
aas:["ss","ddd","fff","bbb"]
},
methods:{
change(){
// 点击按钮时,改变aas的最后一个元素,
// 数据变了 但是view没有更新
this.aas[3] = 444;
}
}
})
为什么
因为vue实现双向数据绑定的机制是数据劫持,也就是在所有对象上有个Object.defineProperty()方法,通过监听set,get方法去实现,而数组没有这两个方法,所以就不会更新view;解决方案就是,需要我们主动通知vue;
解决方案1
methods:{
change(){
this.aas[3] = 444;
// 在vm实例上通知
vm.$set(this.aas,3,444)
}
}
解决方案2
methods:{
change(){
this.aas[3] = 444;
// 在全局对象上通知
Vue.set(this.aas,3,444)
}
}
解决方案3
methods:{
change(){
// vue本身可以监听到数组的一些方法,例如:
// push(),pop(),shift(),unshift(),splice(),sort(),reverse()
this.aas.splice(3,1,"444");
}
}
vue数据绑定数组,改变元素时不更新view问题的更多相关文章
- vue中,对象数组多层嵌套时,更新数据更新页面
vue中的对象和数组的元素直接赋值修改时,是不能响应到view中去的 1.对象更新 this.a={title:'列表1’}; this.a.title='列表2’; <h1>{{a.ti ...
- vue 数组push元素 视图没更新
Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 问题描 ...
- problem: vue之数组元素中的数组类型值数据改变却无法在子组件视图更新问题
问题:给父组件上的一个数组中的某个元素中的数组类型值,添加值后,数据没有在子组件上更新. 对元素添加值之后,vue的数据其实已经更新了并传给了子组件,子组件中没有立即更新. 那么这里有个问题,在子组件 ...
- Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新
一.为什么需要使用Vue.set? vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vu ...
- Vue使用v-for显示列表时,数组里的item数据更新,视图中列表不同步更新的解决方法
由于初始化类型错误导致的不更新,代码是这样的: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- Vue 嵌套数组 数组更新视图不更新
关于Vue的响应式原理,可以看官方文档或其他资料, https://www.jianshu.com/p/34de360d6035 data里定义了一个数组arr,数组的元素可以是同样格式的数组arrC ...
- vue 改变数据DOM不更新,获取不到DOM的解决方法
1.获取不到DOM的解决方案(使用$nextTick) 定义:在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 理解:nextTick(),是将回调 ...
- vue中数组变动更新检测
Vue 包含两种观察数组的方法分别如下 1.变异方法 顾名思义,变异方法会改变被这些方法调用的原始数组,它们也将会触发视图更新,这些方法如下 push() pop() shift() unshift( ...
- vue操作数组时遇到的坑
用vue操作数组时,一般就那几个方法,而且是可以渲染的,但是有时候列表是渲染不了的先说下操作数组的几个方法吧 1 push ( ) 这个方法是在数组的最后面添加元素 用法: 括号里写需要加入的元素 ...
随机推荐
- Zipkin分布式跟踪系统介绍
Zipkin是什么Zipkin分布式跟踪系统:它可以帮助收集时间数据,解决在microservice架构下的延迟问题:它管理这些数据的收集和查找:Zipkin的设计是基于谷歌的Google Dappe ...
- 异常: Bean named 'org.springframework.transaction.interceptor.TransactionInterceptor#0' is expected to be of type 'org.aopalliance.aop.Advice' but was actually of type 'org.springframework.transaction.i
场景: 在使用spring整合hibernate事务时报错解决: spring-aop中已经包含aopaliance,删除多余的jar包
- webpack安装
npm install -g webpack webpack-dev-server
- Markdown简单上手
标题 # +内容 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 字体 1. 加粗(Ctrl+B) **加粗** 2. 斜体(Ctrl+I) *斜体* 3. 斜体加粗(Ctrl+B+I) ...
- GDPR 和个人信息保护的小知识
从2018年5月25日起,欧盟的<通用数据保护条例>(简称 GDPR,General Data Protection Regulation)开始强制施行.这个规范加强了对个人信息的保护,并 ...
- Python 标准类库-日期类型之datetime模块
标准类库-日期类型之datetime模块 by:授客 QQ:1033553122 可用类型 3 实践出真知 4 timedelta对象 4 class datetime.timedelta(da ...
- 利用顶点位移进行VR畸变校正
VR开发的最大挑战之一是对高帧率与高分辨率结合的要求.我们通过把顶点转化为“镜头空间”,删除了需要全屏渲染的纹理,这样就可以大规模提高手机性能. 下面的技术使用谷歌的Cardboard Unity S ...
- Flask路由与蓝图Blueprint
需求分析: 当一个庞大的系统中有很多小模块,在分配路由的时候怎么处理呢?全部都堆到一个py程序中,调用@app.route? 显然这是很不明智的,因为当有几十个模块需要写路由的时候,这样程序员写着写着 ...
- Jmeter-测试计划,线程组,取样器,逻辑控制器,断言和监听器
一 测试计划: 是使用jmeter测试的起点,是其他测试元件的容器,一个完整的测试计划包括多个线程组,逻辑控制器,取样器,监听器,配置元件 用户定义的变量: 测试计划上可以添加用户定义的变量.一般添加 ...
- mssql sqlserver xml数据类型专题
摘要: 下文将详细讲述sql server xml数据类型的相关知识,如下所示: 实验环境: sql server 2008 R2 xml数据类型简介: mssql sqlserver xml数据类型 ...