vue中修改了数据但视图无法更新的情况

本篇文章主要介绍了" vue中修改了数据但视图无法更新的情况"，主要涉及到方面的内容，对于web前端感兴趣的同学可以参考一下： 我们有时候常碰到vue中明明修改了数据，但是视图无法更新，因此我总结了一点点碰到此类的情况： 1、v-for遍历的数组，当数组内容使用的是arr[0].xx =...

我们有时候常碰到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

话不多说，上代码,并且附上效果图：

     

           

               

                   {{item.name}}-{{index}}
                   {{item.age}}-{{index}}
               
           
           click
     

引用

以上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官网给的官方解释

本人代码，给Obj添加属性，并进行监听

以上就介绍了 vue中修改了数据但视图无法更新的情况，包括了方面的内容，希望对web前端有兴趣的朋友有所帮助。

本文网址链接：http://www.codes51.com/article/detail_4573953.html