CODEWITHSUNDEEP
javascriptvue.jsmount
endoftheworld
endoftheworld

Reputation: 55

BeforeMount not working on a computed method

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)

Upvotes: 0

Views: 862

Answers (2)

Tanner
Tanner

Reputation: 2421

This seems like a fundamental misunderstanding on how Computed properties work. Computed properties are accessed the same way you would access props or data on a component. They are consumed as values, not as methods. A big hint to this fact is that you're calling map**Getters**

You could consume filteredRecords in your template something like:

<div v-for="record of filteredRecords" :key="record.someKey">...</div>

or by assigning it to a data property this.records = this.filteredRecords

Upvotes: 0

FrancescoMussi
FrancescoMussi

Reputation: 21630

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

Upvotes: 3

Related Questions