在 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

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

Answer 2

我想这就是您要找的：

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>

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

Filter list while in for loop in Vue

vue.js

vuex