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

我的店铺相关产品线如下所示：

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

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

---

谢谢

只需像这样过滤计算属性中的活动用户

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

computed: {
    ...

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

并将v-for指令更改为

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

---

在同一元件上不使用v-for和v-if时，它应该可以工作。

不建议在同一元件上使用v-for和v-if。看一看为了避免这种情况，您只需创建一个计算属性，在该属性中过滤所有活动用户，然后通过该数组循环。@Matthias您不必说！！！！这正是我想要的好吧，我贴了一个答案，谢谢！这就是我想要的。由于某些原因，我仍然无法知道如何将状态从存储区传递到组件。但我已经到了。再次感谢