过滤掉对象中的计算值答案

【问题标题】：Filtering out a calculated value in in an object过滤掉对象中的计算值
【发布时间】：2021-10-09 10:19:17
【问题描述】：

我试图只显示相关的对象，并尽可能多地去除不相关的东西。

allComponentsFiltered 返回 3 个东西的组合，

搜索输入
component_group_id
selectedComponent .status

// 期望的目标：

我创建了一个值为 inactive 的选项卡，它与组件状态 status.inactive 不匹配这个想法是在过滤器函数中将不具有status.active 的组件返回为true。


const state = {
    componentStatusTabs: [
     { name: "All", value: "all", icon: "mdi-all-inclusive" },
     { name: "Starred", value: "starred", icon: "mdi-star" },
     { name: "Modular", value: "modular", icon: "mdi-view-module" },
     { name: "Active", value: "active", icon: "mdi-lightbulb-on" },
     { name: "Inactive", value: "inactive", icon: "mdi-lightbulb-off" }
    ],
};

// How the component statuses object looks.
selectedComponent =  {
component_group_id: 81,
status: {
  active: true, 
  modular: false,
  starred: false,
 }
}


// Returns the name of the tab name selected within the form field editor
 activeComponentEditFormFieldsStatusTabName: state => {
    return state.componentStatusTabs[state.activeStatusTab].value;
   },
  
   // Returns components that either belong to the selected group,  matches the search string or has the corresponding status.
   allComponentsFiltered: (state, getters, rootState) => {
    if (!getters.hasSelectedSomeGroups) return [];
    const search = rootState.application.search.toLowerCase();
    return state.allComponents.filter(component => {
     return (
      (search === "" || component.config.general_config.title.toLowerCase().match(search)) &&
      (getters.activeComponentEditFormFieldsStatusTabName === "all" || component.status[getters.activeComponentEditFormFieldsStatusTabName]) &&
      state.selectedComponentGroups.some(group => group.id === component.component_group_id)
     );
    });
   }

【问题讨论】：

标签： javascript function vue.js filter

【解决方案1】：

找到解决方案后回答我自己：

 allComponentsFiltered: (state, getters, rootState) => {
  if (!getters.hasSelectedSomeGroups) return [];
  const search = rootState.application.search.toLowerCase();
  return state.allComponents.filter(component => {
   return (
    (search === "" || component.config.general_config.title.toLowerCase().match(search)) &&
    (getters.activeComponentEditFormFieldsStatusTabName === "all" ||
     (getters.activeComponentEditFormFieldsStatusTabName === "inactive" && !component.status.active) ||
     component.status[getters.activeComponentEditFormFieldsStatusTabName]) &&
    state.selectedComponentGroups.some(group => group.id === component.component_group_id)
   );
  });
 },

我加了

|| (getters.activeComponentEditFormFieldsStatusTabName === "inactive" && !component.status.active)

【讨论】：