Условное отображение списка в состоянии Vuex - PullRequest
Новая
       8

Условное отображение списка в состоянии Vuex

0 голосов
/ 02 февраля 2020

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

Моя разметка выглядит следующим образом: 

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

В моих методах я хотел сделать что-то подобное (activeTagsElements является вычисляемым свойством, mapState из 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);
      })
    }

Я также пытался наблюдать за изменением состояния vuex, но не смог добраться до точки, как получить фактические теги из каждого элемента, чтобы сравнить его с состоянием vuex.

Любые советы очень ценятся.

1 Ответ

1 голос
/ 02 февраля 2020

Способ vue состоит в создании свойства computed отфильтрованных задач. Затем вы просто v-for их просматриваете. 

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

Это должно сработать, и это эффективно, так как будет перезапущено filteredTags только если Vuex сохранит изменения или activeElements из вашего фильтра. 

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