带有 Vuex 状态的条件列表渲染

Question

最初我有一个存储在卡片中的动画列表。每张卡片都有几个标签。从顶部过滤器菜单中，我希望能够仅显示与已设置的过滤器匹配的卡片。一个 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 是一个计算属性，来自 Vuex 的 mapState）：

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 状态进行比较。

非常感谢任何提示。

Answer 1

vue的方式是为过滤后的任务创建一个computed属性。然后你只需v-for 通过他们。

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

这应该有效，因为它只会在 Vuex 存储更改或过滤器中的 activeElements 更改时重新运行 filteredTags。

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