在Vue的for循环中过滤列表

Question

我有这个列表，我必须在不同的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"

我有什么办法可以做到吗?

Answer 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>

Answer 2

在Vuex或computed属性中使用getter