Filter list while in for loop in Vue

Question

I have this list and I have to display in different divs the active from the list and those who are inactive.

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

Items come for this part of the code.

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

state.items looks like this

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

I'm thinking if I can do this,

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

Is there any way I can do that?

Answer 1

I think this is what you're looking for:

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>