Массив не изменяется после сращивания и обновляет его свойство

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 (НЕ ВКЛЮЧАЕТ удаленный).

Я не понимаю, почему? Пожалуйста, помогите мне уточнить это? И как я могу обновить его свойство и сохранить этот массив обновленным на странице B?

Спасибо.

Answer 1

Я нашел причину. Индекс обновления item.index -= 1; вызвал функцию, которая неожиданно возвращает массив в исходное состояние.

Спасибо за вашу помощь и приносим извинения за неудобства.

Answer 2

Вы должны использовать третий параметр массива 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;
    });