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

Posted 2023-02-22

【中文标题】带有 Vuex 状态的条件列表渲染

【英文标题】：Conditional List Rendering with Vuex state

【发布时间】：2020-05-18 04:36:38

【问题描述】：

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

非常感谢任何提示。

【参考方案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>

【讨论】：

我认为这个答案仍然缺少检查不同标签的选项，因为组件应用了多个标签，这就是我最初使用 forEach 的原因。这怎么可能包括在内？我认为filteredTags()应该迭代card而不是标签，第二个循环需要card.tag才能正确处理？

我并没有真正了解全局。你有一组卡片，每张卡片都有一组标签和一组动画。您想按卡片的标签过滤卡片。对吗？

基本上是的，动画和卡片是一样的，每张卡片/动画都有一个标签数组

我想我明白了，但请编辑您的帖子并显示完整的组件

我添加了更多组件的相关部分，否则会更加混乱。通过 API 我得到动画和标签。如前所述，标签存储在 allCards 对象内的数组中