vue中修改了数据但视图无法更新的情况
来源:互联网 发布:华为双卡切换网络数据 编辑:程序博客网 时间:2024/06/14 13:24
vue中修改了数据但视图无法更新的情况
标签: vue
2017-08-14 10:24 2147人阅读 评论(0)收藏举报
分类:
我们有时候常碰到vue中明明修改了数据,但是视图无法更新,因此我总结了一点点碰到此类的情况:
1、v-for遍历的数组,当数组内容使用的是arr[0].xx =xx更改数据,vue无法监测到
数组数据变动:我们使用某些方法操作数组,变动数据时,有些方法无法被vue监测,有些可以
- Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测:
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
- vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue)
- filter(), concat(), slice() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组
- Vue 不能检测以下变动的数组:
- ① 当你利用索引直接设置一个项时,vm.items[indexOfItem] = newValue
- ② 当你修改数组的长度时,例如: vm.items.length = newLength
话不多说,上代码,并且附上效果图:
<body> <div id="app"> <ul> <li v-for="(item,index) in gc"> <span>{{item.name}}-{{index}}</span> <span>{{item.age}}-{{index}}</span> </li> </ul> <button @click="add">click</button> </div> <script> new Vue({ el:'#app', data:{ gc:[ {name:'zhangsan',age:10}, {name:'lisi',age:21}, {name:'wangwu',age:22}, {name:'wangwu',age:22} ] },methods:{ // 当点击事件触发时候会修改掉gc[0]的值为lisi,但是视图不会发生变化 add(){ this.gc[0] ={name:'lisi',age:22} } } }) </script> </body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
以上Vue 不能检测数据变动的数组的2种方式解决办法
将代码中的add()方法改为:
add(){ // this.gc[0] ={name:'lisi',age:22} //这样直接修改不能被vue监听到 Vue.set(this.gc,0,{name:'lisi',age:22}) //这样就能被vue监控到,更新视图 }
- 1
- 2
- 3
- 4
阅读全文
0 0
- vue中修改了数据但视图无法更新的情况
- vue中修改了数据但视图无法更新的情况
- Vue遇到的bug-02(vue中修改了数据但视图无法更新的情况)
- Vue.js 数据更新后,视图不会更新的异常
- vue数组中数据变化但是视图没有更新解决方案
- vue数组中数据变化但是视图没有更新解决方案
- vue数组中数据变化但是视图没有更新解决方案
- 数据更新、视图的创建与修改
- vue 数据更新 视图不刷新
- vue中虚拟dom,无法实时更新的解决方案
- Vue-- 监听路由变化,数据无法更新?
- vue实例中的data中的值,无法更新视图
- Vue 数组视图不能更新的解决方案
- [Vue]不能使用索引直接修改数组,但可以使用索引更新对象数组内的属性
- SQL语句,数据更新,数据插入删除修改和对视图的更新操作
- MyEclipse修改了JSP页面,但Tomcat里的没有实时更新
- thinkphp 在数据库更新(save)的时候,如果字段没有被修改,会更新失败 和数据的自动验证,插入的时候可以自动验证,但更新的时候就不能验证了
- vue 循环对象,数据更新,但是视图未刷新
- LATEX常用语法
- 分享精心收藏的前台开发素材网站,都是干货
- 错误 ORA-01102: cannot mount database in EXCLUSIVE mode
- 各领域公开数据集下载
- Redis命令用scan代替keys、smembers等命令
- vue中修改了数据但视图无法更新的情况
- SpringBoot构建微服务实战 之 @Import
- Java命名规范
- 双向链表(一)
- linux配置ssl
- [Leetcode] 472. Concatenated Words 解题报告
- java调用C++的dll遇到问题
- QT 为可执行程序添加图标ico
- 浅析各类排序算法(一) 总述