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

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

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

rush:js;">
  • {{item.name}}-{{index}} {{item.age}}-{{index}}
  • 以上Vue 不能检测数据变动的数组的2种方式解决办法

    代码中的add()方法改为:

    rush:js;"> add(){ // this.gc[0] ={name:'lisi',age:22} //这样直接修改不能被vue监听到 Vue.set(this.gc,age:22}) //这样就能被vue监控到,更新视图 }

    以上这篇解决vue中修改了数据但视图无法更新的情况就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

    相关文章

    可以通过min-width属性来设置el-table-column的最小宽度。以...
    yarn dev,当文件变动后,会自动重启。 yanr start不会自动重...
    ref 用于创建一个对值的响应式引用。这个值可以是原始值(如...
    通过修改 getWK005 函数来实现这一点。这里的 query 参数就是...
    <el-form-item label="入库类型" ...
    API 变动 样式类名变化: 一些组件的样式类名有所变动,可能需...