Utilize a method in Vue.js to filter an array within a computed property

Question

Utilize a method in Vue.js to filter an array within a computed property

I have a question regarding my computed property setup. I want to filter the list of courses displayed when a user clicks a button that triggers the courseFilters() method, showing only non-archived courses.

Below is my current computed property implementation:

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
                }
            })
        }

And here is the courseFilters method in my code:

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'])
        }
    }

However, when I click the button to apply the filters, nothing happens to the computed property output.

javascript vue.js filter vuejs2 computed-properties

Answer 1

Answer №1

It seems like there may be some confusion regarding the specifics of your issue, but I have outlined a potential solution below that could serve as inspiration:

export default {
  data() {
    return { showArchivedCourses: false };
  },
  computed: {
    accessibleCourses() {
      const user = this.$store.getters['UserData/getUser'];

      // The filter callback should return true or false.
      // If your current code is functioning correctly, you can skip this section.
      return this.courses.filter(
        (c) => this.checkAuthorization(['leader']) && c.createdBy === user.uid
      );
    },
    visibleCourses() {
      // This will determine which courses to display in your template.
      // It will either show all authorized courses or only those that are not archived.
      return this.showArchivedCourses
        ? this.accessibleCourses
        : this.accessibleCourses.filter((c) => !c.archive);
    },
  },
  methods: {
    toggleVisibility() {
      // Toggles between displaying and hiding archived courses
      this.showArchivedCourses = !this.showArchivedCourses;
    },
  },
};

This component manages the state for showing or hiding archived courses through a toggling method. By utilizing computed properties effectively, you can obtain the desired output based on the current state. In addition, note that I have named the computed properties with nouns rather than verbs for improved code comprehension.

Answer 2

It seems like there may be some confusion regarding the specifics of your issue, but I have outlined a potential solution below that could serve as inspiration:

export default {
  data() {
    return { showArchivedCourses: false };
  },
  computed: {
    accessibleCourses() {
      const user = this.$store.getters['UserData/getUser'];

      // The filter callback should return true or false.
      // If your current code is functioning correctly, you can skip this section.
      return this.courses.filter(
        (c) => this.checkAuthorization(['leader']) && c.createdBy === user.uid
      );
    },
    visibleCourses() {
      // This will determine which courses to display in your template.
      // It will either show all authorized courses or only those that are not archived.
      return this.showArchivedCourses
        ? this.accessibleCourses
        : this.accessibleCourses.filter((c) => !c.archive);
    },
  },
  methods: {
    toggleVisibility() {
      // Toggles between displaying and hiding archived courses
      this.showArchivedCourses = !this.showArchivedCourses;
    },
  },
};

This component manages the state for showing or hiding archived courses through a toggling method. By utilizing computed properties effectively, you can obtain the desired output based on the current state. In addition, note that I have named the computed properties with nouns rather than verbs for improved code comprehension.

Utilize a method in Vue.js to filter an array within a computed property

Answer №1

Similar questions

jQuery - Error: Unexpected token SyntaxError

Find the furthest distance from the average in a set of data points and identify the corresponding data point

Choosing an option from the dropdown menu with the help of the incredible HTMX framework

What are the best ways to expand product rows to their full potential?

Interact with the horizontal click and drag scroller to navigate through various sections effortlessly, each designed to assist you

How can real-time data be fetched or connected to Firebase v9 in the onSubmit function?

Instructions on utilizing the signUp() function in Supabase for including extra user details during the registration process

AngularJS creates a new window in your application

Generate a configuration file that allows for the reading and storage of modifications

What are the different methods for completing a form?

What is the best method for effectively organizing and storing DOM elements alongside their related objects?

steps for transferring a shallow copy of an array to a function

Error message: jQuery AJAX request fails due to permission denial issue on Internet Explorer

When trying to gather multiple parameters using @Param in a NestJS controller, the retrieved values turn out

Which is the best choice for a large-scale production app: caret, tilde, or a fixed package.json

What is the best approach for incorporating sub-navigation within a page popup in a Next.js project?

What sets Redux React-Native apart: Exploring the nuances between utilizing useSelector in react-redux versus connect

Endless [React Native] onFlatList onEndReached callback invoked

How can a particular component within the DOM be referenced and stored for future use?

Unable to change the filename when utilizing Angular.js ng-file-upload