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

Question

我需要根据用户是否活跃列出一个用户列表。我知道我可以将嵌套 div 中的 v-for 和 v-if 分开，但由于 html 的构造，我不能。我也需要这个用于分页目的。

所以我的 API 包含了数千个用户（一些活跃的真和同样活跃的假）

对于活动的模板，我的模板如下所示：

<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-if 它正在检查名称 Active Operators 的下拉选择选项。那在我的数据对象中。

我的脚本相关行如下所示

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 的情况下在同一个元素上工作。