Vue.js 使用Vuex状态的条件列表呈现

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

我还试着观察vuex状态的变化，但无法了解如何从每个元素中获取实际标记以将其与vuex状态进行比较

---

非常感谢您的任何提示。

vue方法是创建筛选任务的

计算属性。然后你只需通过它们
v-for

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

我认为这个答案仍然缺少检查不同标记的选项，因为一个组件应用了多个标记，这就是我最初使用forEach的原因。如何将其包括在内？我认为filteredTags（）应该在card而不是tags上迭代，第二个循环需要是card.tag才能正确执行？我不是很了解全局。你有一个卡片阵列，每张卡片都有一个标签阵列和一个动画阵列。你想根据卡片上的标签来过滤卡片。正确吗？基本上是的，动画和卡片是一样的，每个卡片/动画都有一个标记数组。我想我明白了，但是编辑你的帖子并显示完整的组件。请添加更多组件的相关部分，否则会更混乱。通过API我可以得到动画和标签。如前所述，标记存储在allCards对象内部的数组中
<Card
 v-for="card in filteredAnimations"
 :key="card.id"
 :id="card.id"
 :name="card.name"
 :tags="card.tags"
>
</Card>

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