vue中修改了数据但视图无法更新的情况
2017-08-14 10:24
676 查看
vue中修改了数据但视图无法更新的情况
标签:vue
2017-08-14 10:24
2147人阅读 评论(0)
收藏
举报
分类:
vue(4)
我们有时候常碰到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
相关文章推荐
- 解决vue中修改了数据但视图无法更新的情况
- vue中修改了数据但视图无法更新的情况
- vue中修改了数据但视图无法更新的情况[转载]
- Vue遇到的bug-02(vue中修改了数据但视图无法更新的情况)
- vue中修改了数据但视图无法更新的情况
- vue中修改了数据但视图无法更新的情况
- Vue.set()动态的新增与修改数据,触发视图更新的方法
- Vue 父子组件的数据传递、修改和更新方法
- 修改可更新视图中的数据
- Vue--关于点击当前路由,视图无法更新的解决方案
- 为什么 vue.js存在某些情况下 v-model绑定数据不实时更新呢?
- Vue-- 监听路由变化,数据无法更新?
- 对于分页视图里面修改数据,在DAL层提示存储区更新、插入和删除语句影响到了意外的行数(0)的原因
- vue数组中数据变化但是视图没有更新解决方案
- 数据更新、视图的创建与修改
- android清除数据后widget无法更新问题修改
- vue实例中的data中的值,无法更新视图
- vue 数据更新 视图不刷新
- SQL语句,数据更新,数据插入删除修改和对视图的更新操作