Question

因此，我有一个使用v-for浏览的项目列表。在打印列表之前，使用.filter()方法用值过滤列表。另外，要在过滤后的值之间切换，我正在使用v-on:click。我的问题是，有没有办法使过滤器更动态？因为如果更改了我设置用于过滤列表的预定义值，则过滤器将不再起作用...

我提供了一个JSFiddle here，所以您可以看到我正在使用的是什么。

我关注的2个主要领域是v-on和计算方法。

<li class="d-flex justify-content-between" v-on:click="engagementFilterKey = 'recieved'">
     <div class="ml-3">
     <span class="text-muted">Received</span>
     </div>
</li>
<li class="d-flex justify-content-between" v-on:click="engagementFilterKey = 'preparation'">
     <div class="ml-3">
     <span class="text-muted">Preparation</span>
     </div>
</li>

这是计算方法

computed: {
    engagementFilter() {
      return this[this.engagementFilterKey];
    },
    recieved() {
        return this.allEngagements.filter((engagement) => engagement.status == 'Recieved')
    },
    preparation() {
        return this.allEngagements.filter((engagement) => engagement.status == 'Preparation')
    },

请查看我在此讨论顶部发布的小提琴...

Answer 1

已更新

想法是从一系列互动中创建一组独特的状态，并动态呈现按钮列表。每个按钮将分配engagementFilterKey，可用于从所有参与列表中过滤出匹配状态。

解决方案代码-JSFiddle

如何在Vue中使过滤列表更加动态

1 个答案: