vue中修改了数据但视图无法更新的情况[转载]
2017-12-08 15:01
561 查看
我们有时候常碰到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
话不多说,上代码,并且附上效果图:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/19/0378c2d7ad5399dd1ec97f697d6be1ca.gif)
以上Vue 不能检测数据变动的数组的2种方式解决办法
将代码中的add()方法改为:
add(){ // this.gc[0] ={name:'lisi',age:22} //这样直接修改不能被vue监听到 Vue.set(this.gc,0,{name:'lisi',age:22}) //这样就能被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>
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/19/0378c2d7ad5399dd1ec97f697d6be1ca.gif)
以上Vue 不能检测数据变动的数组的2种方式解决办法
将代码中的add()方法改为:
add(){ // this.gc[0] ={name:'lisi',age:22} //这样直接修改不能被vue监听到 Vue.set(this.gc,0,{name:'lisi',age:22}) //这样就能被vue监控到,更新视图 }
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/19/7ed826739a1c8c8ed67057793bbe5fa3.gif)
相关文章推荐
- vue中修改了数据但视图无法更新的情况
- vue中修改了数据但视图无法更新的情况
- vue中修改了数据但视图无法更新的情况
- 解决vue中修改了数据但视图无法更新的情况
- vue中修改了数据但视图无法更新的情况
- Vue遇到的bug-02(vue中修改了数据但视图无法更新的情况)
- Vue.set()动态的新增与修改数据,触发视图更新的方法
- vue数组中数据变化但是视图没有更新解决方案
- vue 数据更新 视图不刷新
- 修改可更新视图中的数据
- 数据更新、视图的创建与修改
- sqlserver中多行所有数据重复,无法更新或删除问题,通常是在没有主键的情况下的表
- 为什么 vue.js存在某些情况下 v-model绑定数据不实时更新呢?
- 使用tftp更新nandflash的数据(参考转载并修改)
- SQL语句,数据更新,数据插入删除修改和对视图的更新操作
- vue数组中数据变化但是视图没有更新解决方案
- Vue-- 监听路由变化,数据无法更新?
- vue 循环对象,数据更新,但是视图未刷新
- yyuc视图未更新,控制器修改可以看到,视图无法更新,提示Allowed memory size of exhausted