Question

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

正确的方法是为过滤后的任务创建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>

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

1 个答案: