Как правильно отфильтровать массив из state?

Question

[Darkness]

Мне нужно отфильтровать массив.
Сначала у меня отображается все данные из массива, а после, если нажать на "Пропущенные" тогда видеть мы должны только их ( в массиве же это type="fail")

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

.calls__filter
    p(@click="fillterIt") Исходящие
        .calls__information(v-for="item in calls" :key="item.date")
            .calls__information-date
                p {{item.date}}
            .calls__information-main(v-for="person in item.persons" :key="person.name")
                .calls__information-calls(v-for="call in person.calls")
                    p {{call.number}}
                    p {{call.time}}

fillterIt() {
            let persons = this.calls.flatMap(i => i.persons)
            let allCalls = persons.flatMap(i => i.calls)
            let newOut = allCalls.filter(item => item.type == 'out')
            this.calls = newOut // тут у меня ошибка мутации 
            // calls - это пропс с массивом. внутри которого есть еще persons, а уже внутри persons есть еще один calls где и лежит type
            // выдаст только calls типа out
        }

Вопрос, как сделать показ нужных данных ( а-ля фильтр) без изменения данных state?
Скрин для понятия:

Comments

[0xD34F]

А чо фильтровать-то? Почему вы скрываете эту информацию? Или надеетесь, что кто-то станет угадывать, как там ваши данные выглядят? Вряд ли так будет. Так что давайте-ка - пример полных данных, пример отфильтрованных данных. А лучше - ссылка на демо в песочнице.

[Darkness]

0xD34F, Вы правы, я не предоставил сами данные, которые нужно фильтровать. К сожалению, не смогу дать песочнице.

Вот сами данные в Action ( которые при запуске текут в state, а оттуда я уже получаю их)

context.state.modalContractorsHistory = {
    call: [
      {
        date: '06.05.18',
        persons: [
          {
            name: 'Александра Скабичевская',
            calls: [
              {
                number: '8(843) 254 31 51' ,
                type: 'out',
                time: '05:34'
              }
            ]
          },
          {
            name: 'Губка Бот',
            calls: [
              {
                number: '8(999) 354 55 55' ,
                type: 'fail',
                time: '01:22'
              }
            ]
          }
        ]
      },
      {
        date: '01.10.19',
        persons: [
          {
            name: 'Ken TamovKen TamovKen TamovKen TamovKen Tamov',
            calls: [          
              {
                number: '8(843) 211 11 11',
                type: 'in',
                time: '02:34'
              }
            ]
          }
        ]
      }
    ]
  }
  context.commit('GET_MODALCONTRACTORSHSITORY')
}

Я добился в computed свойстве сделать фильтр, но он явно не работает как нужно ( он просто заменяет все мои иконки по типу из фильтра, но возвращает в консоль только контакт того типа, по которому я пытаюсь отфильтровать)

callIn() {
            let persons = this.calls.flatMap(i => i.persons)
            let allCalls = persons.flatMap(i => i.calls)
            let newOut = allCalls.filter(item => item.type == 'in')

            console.log(newOut)
            return newOut
        }

Я не очень понимаю, как сделать именно возврат при нажатие, от слова совсем. Т.е. окей, мы их фильтруем в computed, и пусть даже я выведу их, но как сделать смену ( т.е. динамически отрисовать выбранный фильтр)

UPD:
До меня дошло, что он не просто заменяет картинки, он выводит 3 раза мне одно и тоже, но подходящий под мой фильтр. А выводит он 3 раза одно и тоже, так как выше я вывожу item из массива с именами, а там их 3.
Также пока не понимаю, как вывести только подходящий item и сменить его/ их по клику.

Буду очень благодарен

[0xD34F]

Буду очень благодарен

Чтобы вот такого больше не было. И вообще, не надо писать ничего, что не содержит информации о вашей проблеме.

[Darkness]

0xD34F, Понял

Answer 1

[0xD34F]

https://jsfiddle.net/Lvknuta1/

Comments

[Darkness]

Огромное спасибо, сейчас буду разбираться.
Можете только сказать где мой прокол в том, что фильтрацию я правильно делаю, но т.к. у меня в v-for 2 объекта, то он и выводит 2 раза одинаковых данных? Т.е. я фильтрацию делаю по типу out он видит это, и 2 раза показывает контакт с типом out, т.к. у меня объект содержит 2 элемента.