数组在拼接并更新其属性后不会更改

Question

我有一个可以从多个页面访问的全局数组：

this.$root.$data.globalError.testArray

它包含：

export class GlobalError {
    testArray: Array<IDictionaryError> = [];
    ...
}
export interface IDictionaryError {
    index: number;
    errorList: ErrorType | null;
    numberError: number;
}
export interface ErrorType {
    [fieldName: string]: Array<ErrorItem> | string | null;
}

它是在index.ts文件中初始化的，如下：

new Vue(
{ 
   data: {
     globalError: null,
   ...
}

在第A页的功能中，我将此数组拼写并更新其。

this.$root.$data.globalError.testArray.splice(indexSelected, 1);
this.$root.$data.globalError.testArray.forEach(item => {
  if (item.index > indexSelected) {
      item.index -= 1;
  }
});

这是第B页中的代码：

get countNumberError(): number {
 let total: number = 0;
 this.$root.$data.globalError.testArray.forEach(item => {
   total += item.numberError;
 });
 return total;
}

事情是，如果更新上面的foreach部分的索引，则当访问B中的此数组时，此数组保留所有原始元素(包括已删除的元素(。如果我不更新其属性，则该数组将在第B页中进行更新(不包括已删除的一个(。

我不明白为什么？请帮我澄清一下吗？以及如何更新其属性并将此数组保留在页面上的更新？

谢谢。

Answer 1

您应该使用forEach数组的第三个参数来编辑此数组

this.globalError.testArray.forEach((item, i, myArray) => {
  if (item.index > indexSelected) {
      myArray[i].index -= 1;
  }
});

或者您可以使用.map

this.globalError.testArray = this.globalError.testArray.map(item => {
      if (item.index > indexSelected) {
          item.index -= 1;
      }
      return item;
    });

Answer 2

我找到了原因。更新索引item.index -= 1;触发了一个函数，该功能意外地将数组从开始状态逆转。

感谢您的帮助，并为此带来了不便。