Блог

Я пытаюсь создать простой фильтр, который сортирует массив в Vue. У меня есть данные в состоянии, которые обновляются вызовом api, который запускается только при загрузке страницы. Структура данных представляет собой список складов, каждый из которых имеет идентификатор и другие свойства, объект периода, внутри объекта периода находится массив объектов агентов по продажам, каждый из агентов по продажам имеет идентификатор.

Затем в компоненте появляется массив идентификаторов складов и массив идентификаторов агентов по продажам. Я изменяю содержимое этих массивов, нажимая на флажки, чтобы склады или агенты по продажам были видны или нет.

У меня есть вычисленное свойство computedWarehouses, которое запускается при изменении вышеупомянутого массива видимых агентов по продажам или складов.

Часть складов работает нормально, когда я снимаю флажок для склада, склад удаляется из массива computedWarehouses, но склад все еще находится в состоянии.данные. Когда я снова нажимаю на флажок, хранилище снова вставляется в массив computedWarehouses, и все хорошо.

Теперь, когда я пытаюсь сделать то же самое для агентов по продажам, которые находятся внутри объекта периода складов, я могу удалить агентов по продажам из массива вычисляемых складов, но по какой-то причине они также удаляются из данных состояния, поэтому снятие флажка агентов по продажам удаляет агента по продажам из массива вычисляемых складов, но повторная установка флажка не влияет, потому что агента по продажам больше нет в данных.

данные, которые я получаю от штата через геттер.

Код недвижимости computedWarehouses() :

 computedWarehouses() {
      let computedWarehouses = [];
      let intWarehousesFilter = this.warehousesFilter.map( (id) => {
        return parseInt(id);
      });

      for (let warehouse in this.data) {
        if (intWarehousesFilter.includes(this.data[warehouse].id)) {
          computedWarehouses.push(this.data[warehouse]);
        }
      }

      let intConsultantsFilter = this.consultantsFilter.map( (id) => {
        return parseInt(id);
      });
      
      for (let warehouse in computedWarehouses) {
        for (let workday in computedWarehouses[warehouse].period.workdaysObjects) {
          let computedSalesAgents = [];
          for (let salesAgent in computedWarehouses[warehouse].period.workdaysObjects[workday].salesAgents) {
            let salesAgentObject = computedWarehouses[warehouse].period.workdaysObjects[workday].salesAgents[salesAgent];
            if (intConsultantsFilter.includes(parseInt(salesAgentObject.id))) {
              computedSalesAgents.push(salesAgentObject);
            }
          }
          computedWarehouses[warehouse].period.workdaysObjects[workday].salesAgents = computedSalesAgents;
        }
      }

      return computedWarehouses;
},
 

Что я делаю не так? Я не хочу менять государство, я хочу, чтобы государство.данные будут оставаться неизменными все время, поэтому, когда я снова установлю флажок «Некоторые агенты по продажам», я снова увижу агента.

Я отвечу сам. Решение состояло в том, чтобы сделать копию и разорвать все связи с исходными данными.

const tempWarehouses = JSON.parse(JSON.stringify(this.data));

Я добавил эту строку и выполнил все свои операции с домами временного размещения, так что это.данные остались нетронутыми.