我们在处理vue项目的时候,可能经常会遇到数据变化,但是视图并没有实时渲染的情况,主要有两种情况

1、使用索引值操作数组时

使用索引值去更新数组时会出现数据变化试图却没有更新的情况,比如使用了push()、pop()、shift()、unshift()、splice()、sort()、reverse()等方法操作数组,或者是直接通过ary[index]操作数组都会出现这种情况

2、对象的增加或者删除属性时

由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的

解决方案

使用Vue.set(target, key, value)方法

target:要更改的数据源(可以是对象或者数组)

key:要更改的具体数据

value :重新赋的值

但是今天遇到一种情况,在项目中遇到要更新的数组是一个二维数组,尝试很多种写法都不行,最后无意间成功了,写法:this.$set(ary[i], j, value)

具体原理不清楚,欢迎大佬解释一波。。。

Logo

前往低代码交流专区

更多推荐