解构或预过滤Vuejs计算属性中的数据

Question

我需要根据用户是否处于活动状态来列出用户列表。我知道我可以在嵌套的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)
  }
};

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

谢谢

Answer 1

只需过滤计算属性中的活动用户，如下所示

computed: {
    ...

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

并将v-for指令更改为

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

而且它应该可以在同一元素上没有v-for和v-if的情况下工作。