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

Question

我希望这不是一个愚蠢的问题。我有一个计算的 属性，其中列出了 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'])
        }
    }

目前，当我点击按钮时，计算结果没有任何变化 属性。

Answer 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 + 当前状态。

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