Vue 检测不到数组或对象的变化怎么办?

对于这个问题,官方有给出详细的解决方案:

使用 Vue.set(object/array, propertyName/indexOfItem, newvalue) 方法可解决“Vue 无法检测 property 的添加或移除”和“Vue 不能检测数组利用索引直接设置一个数组项变动”问题。

例如:当我在vue中直接改变数组项时,数组值已经变化,但是页面并未更新;

在这里插入图片描述
此时将赋值行改成用Vue.set设置即可:

Vue.set(this.ds_monitor[index], 3, "selrunbox1");

另外也可用forceUpdate()方法作为补充,也能达到效果:

this.ds_monitor[index][3] = "selrunbox1"; //点击框样式
this.$forceUpdate();

注:从官方文档来看用forceUpdate方法会重新渲染整个Vue实例,如果只是想单独改变数组的值,建议使用官方推荐方法,采用Vue.set设置。在这里插入图片描述

补充:如果修改数组的长度,导致vue检测不到,可使用splice方法

vm.array.splice(newLength)

版权声明:本文为minmin_web原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。