BeforeMount not working on a computed method

Question

Hello i have a problem whenever i reload my page i want to call a beforeMount() method to call my filterRecords (computed method) so that i can receive the data ,but it is just not working fine it is telling me that filterRecords is not a function.

My computed:

computed: {
    ...mapGetters({
      sec: "sec"
    }),
    createdDate() {
      return moment().format("DD-MM-YYYY ");
    },
    createdHours() {
      return moment().format("HH:mm ");
    },
    filteredRecords() {
      return this.records.filter(record => {
        return record.template_id === this.sec;
      });
    }
  },

so i just do this:

beforeMount() {
    this.filteredRecords();
  },

it is not calling it so i get nothing to my filteredRecords.

how am i able to call it when i reload the page ( i am recieving the records data from an API rails)

Answer 1

Be sure to check the Vue docs about computed properties.

You should not call them as functions, but as properties (since they are computed properties).

You can try to console log filteredRecords in the beforeMount hook like this:

beforeMount() {
   console.log(this.filteredRecords)
},