使用 Vue.js 中的方法过滤计算属性的数组

Posted 2023-02-23

【中文标题】使用 Vue.js 中的方法过滤计算属性的数组

【英文标题】：Filter array of a computed property using a method in Vue.js

【发布时间】：2021-06-28 17:22:00

【问题描述】：

我希望这不是一个愚蠢的问题。我有一个列出 ALL 课程的计算属性。当用户单击一个调用名为 courseFilters() 的方法的按钮时，我想过滤计算的属性以仅显示未归档的课程。

这是我的计算属性：

filterCourses() 
            const getUser = this.$store.getters['UserData/getUser']
            
            return this.courses.filter((item) => 
                if(this.checkAuthorization(['leader'])) 
                    return item.createdBy === getUser.uid
                 else 
                    return item
                
            )
        

这是我的方法：

courseFilters(which) 
        if(which == 'hide-archived') 
            this.filterCourses.filter((item) => 
                if(!item.archive) 
                    return item
                
            )
        
        if(which == 'clear') 
            this.getCourses(this.$store.getters['AppData/cid'])
        
    

当前，当我单击按钮时，计算的属性没有任何变化。

【参考方案1】：

我认为我没有完全理解您的问题的细节，但这里有一个可能会启发您的解决方案草图：

export default 
  data() 
    return  areArchivedCoursesVisible: false ;
  ,
  computed: 
    authorizedCourses() 
      const getUser = this.$store.getters['UserData/getUser'];

      // The callback in a filter should return true or false.
      // I'm not sure if this is exactly what you want.
      // If your original code works, then skip this.
      return this.courses.filter(
        (c) => this.checkAuthorization(['leader']) && c.createdBy === getUser.uid
      );
    ,
    visibleCourses() 
      // This is probably what you display in your template.
      // It's either all of the authorized courses, or the authorized
      // courses which are not archived.
      return this.areArchivedCoursesVisible
        ? this.authorizedCourses
        : this.this.authorizedCourses.filter((c) => !c.archive);
    ,
  ,
  methods: 
    toggleVisible() 
      // Toggle between showing and not showing the archived courses
      this.areArchivedCoursesVisible = !this.areArchivedCoursesVisible;
    ,
  ,
;

这只是保持一些状态，指示是否应该显示存档的课程（通过方法切换）。然后你可以结合你的计算属性来根据状态得到正确的答案。在此示例中，visibleCourses 使用计算属性 authorizedCourses 的输出 + 当前状态。

另外请注意，我将计算属性命名为名词而不是动词，我发现这使代码更容易理解。