在Vue中的for循环中过滤列表答案

【问题标题】：Filter list while in for loop in Vue在Vue中的for循环中过滤列表
【发布时间】：2021-02-26 06:06:40
【问题描述】：

我有这个列表，我必须在不同的 div 中显示列表中的 active 和 inactive。

<v-ons-card
  v-for="item in items.data"
  :key="item.id"
> </v-ons-card>

项目来自这部分代码。

computed: mapState({
    items: state => state.items.items
  })

state.items 看起来像这样

const state = {
  items: {
    data: [],
  },
};

我在想我能不能做到这一点，

v-for="item in items.data.active"

有什么办法可以做到吗？

【问题讨论】：

您能分享一下您的state.items 的样子吗？
更新了内容。看起来是这样的。
如何判断数据是活跃的还是不活跃的？
您可以尝试在活动 div 列表中使用v-if="true === item.active"，在非活动列表中使用v-if="false === item.active"。但最好的解决方案是在您的商店中创建getters，让他们过滤写入项目，而不是弄乱应用程序的视图部分。

标签： vue.js vuex

【解决方案1】：

我想这就是你要找的东西：

computed: {
    activeItems() {
      return this.items.data.filter((x) => x.active);
    },
    inactiveItems() {
      return this.items.data.filter((x) => !x.active);
    },
  },

<div>Active items:</div>
<v-ons-card
  v-for="item in activeItems"
  :key="item.id"
></v-ons-card>

<div>Inactive items:</div>
<v-ons-card
  v-for="item in inactiveItems"
  :key="item.id"
></v-ons-card>

【讨论】：

【解决方案2】：

在 Vuex 或计算属性中使用 getter。

【讨论】：