Could you guys please help me understand why my code is not functioning properly?
I am receiving an array from my backend rails API, which is providing the data correctly. I have created an empty array where I filter the records based on their ID.
The filtering process works fine initially, but whenever I refresh the page, my filterRecords method fails to execute and returns an empty array.
Below is the code snippet where I loop through the array and display the description in my filteredRecords:
<h1
class="content"
v-for="(record, index) of filteredRecords"
:key="index"
:record="record"
:class="{ 'is-active': index === activeSpan }"
>
<strong>{{ record.description }} </strong>
</h1>
This is the filterRecords() method in computed properties:
computed: {
...mapGetters({
id: "id"
}),
filteredRecords() {
return this.records.filter(record => {
return record.template_id === this.id;
});
}
},
This is how I fetch data from the API:
created() {
if (!localStorage.signedIn) {
this.$router.replace("/");
} else {
this.$http.secured
.get("/api/v1/records")
.then(response => {
this.records = response.data;
})
.catch(error => this.setError(error, "Something went wrong"));
}
},
Can anyone guide me on how to ensure that the records are fetched and then filtered when I reload the page (i.e., invoke the filteredRecords computed method)?
Thank you!
EDIT
Hello, the issue was with the comparison operator used in the filter function. It should be == instead of === since they are different data types.