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页中访问这个数组时，这个数组保留所有原始元素（INCLUDE删除了一个）。如果我不更新其属性，则将在第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;触发了一个函数，该函数意外地从开始状态反转了数组。

感谢您的帮助，对于给您带来的不便，我们深表歉意。

拼接后阵列不会更改并更新其属性

2 个答案: