Как сделать отфильтрованный список более динамичным в Vue

Question

Итак, у меня есть список элементов, которые я перебираю, используя v-for.Перед печатью список фильтруется по значению с использованием метода .filter().Также для переключения между отфильтрованными значениями я использую v-on:click.У меня вопрос, есть ли способ сделать фильтр более динамичным?потому что, если предопределенные значения, которые я установил для фильтрации списка, будут изменены, то фильтр больше не будет работать ...

Я предоставил JSFiddle здесь Так что вы можете увидеть, что это такоеЯ работаю с.

Моими двумя основными проблемами являются v-on и вычислительные методы ..

<li class="d-flex justify-content-between" v-on:click="engagementFilterKey = 'recieved'">
     <div class="ml-3">
     <span class="text-muted">Received</span>
     </div>
</li>
<li class="d-flex justify-content-between" v-on:click="engagementFilterKey = 'preparation'">
     <div class="ml-3">
     <span class="text-muted">Preparation</span>
     </div>
</li>

Вот вычислительные методы

computed: {
    engagementFilter() {
      return this[this.engagementFilterKey];
    },
    recieved() {
        return this.allEngagements.filter((engagement) => engagement.status == 'Recieved')
    },
    preparation() {
        return this.allEngagements.filter((engagement) => engagement.status == 'Preparation')
    },

Пожалуйста, просмотрите скрипку, которую я разместил в начале этого обсуждения ...

Answer 1

Обновлено

Идея состоит в том, чтобы создать уникальный набор статусов из массива заданий и динамически отображать список кнопок. Каждой кнопке будет присвоено значение engagementFilterKey, которое можно использовать для фильтрации соответствующих статусов из списка всех заданий.

Код решения - JSFiddle