[Vuejs]-Filter list while in for loop in Vue

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>

1πŸ‘

Use getters in Vuex or computed property.

Leave a comment