CODEWITHSUNDEEP
javascriptarraysvue.jsvuex
TJ Weems
TJ Weems

Reputation: 1114

How To Make Filtered List More Dynamic In Vue

So I have a list of items that I am looping through using v-for. Before the list is printed it is filtered by a value using the .filter() method. Also to change between filtered values I am using v-on:click. My question is, is there a way I could make the filter more dynamic? because if the predefined values I have set to filter the list are changed then the filter will no longer work...

I have provided a JSFiddle here So you could see what it is that I am working with.

My 2 main areas of concern are the v-on and computed methods..

<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>

Here is the computed methods

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

Please view the fiddle I posted at the top of this discussion...

Upvotes: 1

Views: 120

Answers (1)

aBiscuit
aBiscuit

Reputation: 4732

Updated

Idea is to create unique set of statuses from an array of engagements and dynamically render list of buttons. Each button will assign engagementFilterKey which can be used to filter out matching statuses from the list of all engagements.

Solution code - JSFiddle

Upvotes: 2

Related Questions