对于这个问题,官方有给出详细的解决方案:
使用 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)