在Vuejs中解构或预筛选计算属性中的数据

我需要根据用户是否处于活动状态列出一个用户列表。我知道我可以在嵌套div中分离v-for和v-if,但由于html的构造,我不能。我还需要这个分页的目的。

所以我的API包含数千个用户(一些活动的true和相同的活动的false)

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

注意:第一个v-如果它正在检查名称活动运算符的下拉选择选项。在我的数据对象中。

我的脚本相关行如下所示

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

我的商店相关线路如下:

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)
  }
};

同样,我希望在可用于循环的计算属性中包含活动用户。最后,我将为不活跃的用户制作另一个

谢谢