解决数据已被修改但视图无法在vue中更新的情况

有时候，我们经常会遇到数据在vue中被明显修改，但是视图无法更新的情况，所以我总结了一点这样的情况：

1.当数组内容使用arr[0]时，vue无法监视v-for遍历的数组。xx=xx变更数据

数组数据更改：我们使用一些方法来操作数组。当改变数据时，有些方法不能被vue监控，而另一些方法可以

Vue封装了多个阵列操作功能，当vue的数据发生变化时，这些方法操作的阵列将受到vue的监控：

推送()

流行音乐()

班次()

unshift()

拼接()

排序()

反向()

Vue2.0还增加了观察Vue的方法。集合(项目、项目索引、新值)

filter()，concat()，slice().这些不会改变原始数组，但总是返回一个新数组。使用非突变方法时，可以用新数组替换旧数组

Vue无法检测到以下变量数组：

(1)当使用索引直接设置一个项目时，vm.items[indexOfItem]=newValue

修改数组长度时，例如：vm.items.length=newLength

话不多说，编码，并附上渲染图：

正文div id='app' ul li v-for='(item，index)在GC ' span { { item . name } }-{ { index } }/span span { { item . age } }-{ { index } }/span/Li/ul button @ click=' add ' click/button/div脚本new Vue({ el:'# app '，data : { GC :[{ name : ' Zhang San '，age:10}，{ name 336010 }Add () {this。GC [0]={name:' Lisi '，age :22 } })/脚本/正文

Vue的上述两种解决方案无法检测到数据变化的数组

将代码中的add()方法更改为：

Add () {//this。GC [0]={name:' Lisi '，age :22 }//这种直接修改vue听不进去。设置(这个。GC，0，{name:' Lisi '，age:22})//So

以上文章解决了vue中数据已修改但视图无法更新的问题，这是边肖分享的全部内容。希望能给大家一个参考，支持我们。