Deconstructing or pre-filtering data in a computed property in Vuejs

Question

I need to put out a list of users based on whether they are active or not. I know I can separate the v-for and the v-if in nested divs but I can't because of the construct of the html. Also I need this for pagination purposes.

So I have my API containing thousands of users (some active true and same active false)

My template looks like this for the active ones:

<div v-if="filterformData.filterby === 'Active Operators'">
  <div v-for="(user, key) in operators" :key="key" v-if="user.active">
    User Name: {{user.name}}
    User ID: {{user.id}}
    ...
  </div>
</div>

Note: the first v-if it's checking for a dropdown select option of name Active Operators. That's in my data object.

My script relevant lines look like this

computed: {
   ...mapGetters("users", ["operators"])
},
methods: {
   ...mapActions("users", ["getUsers"])
}
created() {
  this.getUsers();
}

My store relevant lines look like this:

import { axiosInstance } from "boot/axios";

export default {
  namespaced: true,
  state: {
    operators: []
  },
  getters: {
    operators: state => {
      return state.operators;
    }
  },
  actions: {
    async getUsers({ commit }) {
       const response = await axiosInstance.get("operator");
       commit("setUsers", response.data.data);
    }
  },
  mutations: {
    setUsers: (state, operators) => (state.operators = operators)
  }
};

Again, I'd like to contain the active users in a computed property that I can use for the loop. And eventually, I will be making another one for inactive users as well

Thanks

Answer 1

Just filter the active users in a computed property like this

computed: {
    ...

    activeUsers() {
        return this.operators.filter(user => user.active)
    }
},

and change the v-for directive to this

<div v-for="(user, key) in activeUsers" :key="key">

and it should work without v-for and v-if on the same element.