Conditional List Rendering with Vuex state

Question

Initially I have a list of animations stored in Cards. Each card has a few tags. From a top filter menu I want to be able to display only Cards, that match with the filter that has been set. A vuex state holds the information of all currently applied filters.

My markup looks like this:

    <div class="Feed__cards">
      <Card
        v-for="(card, index) in filteredCards"
        :key="card.id"
        :id="card.id"
        :name="card.name"
        :tags="card.tags"
        :description="card.description"
        :video="card.video"
        :valueset="getValueSet(index)"
        class="Feed__card"
      >
      </Card>

In my methods I wanted to do something like this (activeTagsElements is a computed property, mapState from Vuex):

compare(tags) {
      tags.forEach(tag => {
        if(this.activeTagsElements.includes(tag)){
          return true
        }
      })
    },
 getAllAnimations() {
      this.$axios.get('/api/animations/all')
       .then(response => {
        this.allCards = response.data;
        this.allMaxIndex = response.data.length - 1;
        response.data.forEach((animation, index) => {
          this.getTags(animation.id, index, this.allCards, this.allMaxIndex, 'all');
        });
      }).catch((error) => {
        console.log(error)
      })
    },
getTags(id, index, slot, max, type) {
      this.$axios.get('/api/animationtags/' + id)
       .then(response => {
         slot[index].tags = response.data.map(tag => {
          return tag.name;
        });
        if(index == max && type == 'initial'){
          this.initialLoad = true;

        } else if(index == max && type == 'all') {
          this.allLoad = true;
        }
      }).catch((error) => {
        console.log(error);
      })
    }

I also tried watching the change of the vuex state but couldn't get to the point of how to get the actual tags from each element to compare it to the vuex state.

Any hints are very appreciated.

Borjante Borjante · Accepted Answer · 2020-02-01T23:36:37

The vue way is to create a computed property of the filtered tasks. Then you just v-for throught them.

<Card
 v-for="card in filteredAnimations"
 :key="card.id"
 :id="card.id"
 :name="card.name"
 :tags="card.tags"
>
</Card>

This should work, and is efficient as it will only rerun filteredTags if either Vuex store changes or the activeElements from your filter changes.

<script>
export default {
    data() {
        return {
            activeTagsElements: []
        }
    },
    computed: {
        animations() {
            return this.$store.animations
        },
        filteredAnimations() {
            return this.animations.filter(animation => {
                return this.activeTagsElements.includes(animation)
            })
        }
    }
}
</script>

Conditional List Rendering with Vuex state

1 Answers