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 · Accepted Answer · 2020-02-02 00:28:16Z

1

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>

edited Feb 2, 2020 at 0:28

answered Feb 1, 2020 at 23:36

Borjante

10.7k6 gold badges40 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jackie D Over a year ago

I think this answer is still missing the option to check for different tags as a component has more than one tags applied, that's why I had the forEach initially. How can this be included? I think the filteredTags() should iterate over card instead of tags and the second loop needs to be card.tag in order to get it right?

Borjante Over a year ago

I'm not really getting the big picture. You have an array of cards, each card has an array of tags and an array of animations. You want to filter the cards by the tags it has. Correct?

Jackie D Over a year ago

Basically yes, animations and cards are the same and every card/animation has an array of tags

Borjante Over a year ago

I think I get it, but edit your post and show the full component please

Jackie D Over a year ago

I added in more of the relevant parts of the component, otherwise it would be more confusing. Via the API I get animations and tags. As already mentioned the tags are stored in an Array inside of the allCards object

Collectives™ on Stack Overflow

Conditional List Rendering with Vuex state

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related