Деконструкция или предварительная фильтрация данных в вычисляемом свойстве в Vuejs

Question

Мне нужно выложить список пользователей в зависимости от того, активны они или нет. Я знаю, что могу разделить v-for и v-if во вложенных div, но не могу из-за конструкции 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-если он проверяет выпадающий список выбора имени 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)
  }
};

Опять я хотел бы содержать активных пользователей в вычисляемом свойстве, которое я могу использовать для l oop. И, в конце концов, я буду делать еще один для неактивных пользователей

Спасибо

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 на том же элементе.