Currently, I am iterating through a list of items using the v-for directive. Before displaying the list, I apply a filter based on a specific value using the .filter() method. To switch between different filtered values, I utilize the v-on:click event. However, my concern is that if the predefined filter values are altered, the filtering process might break. Is there a way to make this filter more flexible and dynamic?
You can check out the code on JSFiddle here to see the implementation.
My main focus areas are the v-on directives and computed methods.
<li class="d-flex justify-content-between" v-on:click="engagementFilterKey = 'received'">
<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>
Below are the computed methods:
computed: {
engagementFilter() {
return this[this.engagementFilterKey];
},
received() {
return this.allEngagements.filter((engagement) => engagement.status == 'Received')
},
preparation() {
return this.allEngagements.filter((engagement) => engagement.status == 'Preparation')
},
Please take a look at the provided JSFiddle for a better understanding of the issue.