拼接后数组不改变并更新其属性答案

【问题标题】：Array don't change after splice and update its property拼接后数组不改变并更新其属性
【发布时间】：2018-10-06 21:24:24
【问题描述】：

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

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 中更新（不包括已删除的）。

我不明白为什么？请帮我澄清一下？以及如何更新它的属性并在页面 B 中保持这个数组的更新？

谢谢。

【问题讨论】：

如果我不更新它的属性，数组将在页面B中更新。你是什么意思，如果你不运行forEach位删除有效吗？如果您确实运行了forEach 位，就好像从未发生过删除？
是的，完全正确。如果我不执行“item.index -= 1;”，删除也可以。
可以显示testArray的内容吗？
@acdcjunior：我已经更新了代码

标签： javascript arrays typescript vue.js vuejs2

【解决方案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;
    });

【讨论】：

@Tan Duong：谢谢，但您的解决方案不起作用:(

【解决方案2】：

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

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

【讨论】：