vue使用二维数组监听失败原因以及如何使用二维数组进行样式监听

vue如何使用二维数组进行样式监听

问题描述:

在vue中如果你使用二维数组进行页面的动态更新，会出现更新失败的问题，这一般是由于你动态声明了二维数组，或采用了vue为设定的数组监听方法

解决方法：

问题一：如果必须要动态声明二维数组，那么我们可以通过es6语法中的this.arrActive2 = {…arr}，通过动态定义arr实现为arrActive2 静态初始化;

	  let arr= new Array(3);   //动态定义一个二维数组
      for(let i=0;i<arr.length;i++){
        arr[i] = new Array(3);
      }
      this.arrActive2 = {...arr};   //形同于arrActive2=[['','',''],['','',''],['','','']]

问题二：导致原因也可能是因为你采用了vue不进行监听的方法

由于 JavaScript 的，Vue 不能检测以下数组的变动：

1、当你利用索引直接设置一个数组项时，例如：
vm.items[indexOfItem] = newValue
2、当你修改数组的长度时，例如：
vm.items.length = newLength
举个例子：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

对于这类原因，我们可以参考官方文档：，使用一些变异的方法
例如：
push()、pop()、shift()、unshift()、splice()、sort()、reverse()等等

如有其他相关问题，欢迎大家评论！！！