I'm currently working on populating a component with leads fetched from an API. In my setup, I have a LeadService file and a Vue template file. The challenge I'm encountering is related to using an async call in my template file. Although the call works fine, when trying to compute the values, it throws a property does not exist on type error. Strangely enough, the components display correctly behind the error message. I'm struggling to find a solution to eliminate this error.
Here's a snippet from the service class LeadService.ts
import ApiService from "@/core/services/ApiService";
interface Lead {
// Properties of the Lead interface
}
export default class LeadService {
// Methods in the LeadService class
}
And here's a glimpse of my Vue template file Leads.vue
<template>
<!-- Template content -->
</template>
<script lang="ts">
// Script section
</script>
The issue arises in the computed functions where I attempt to filter this.LeadData.
Every filter operation triggers a Property does not exist on type error, despite the properties actually existing.
One notable observation is that once this.leadData is set, it becomes a Proxy object.
I would appreciate any assistance in resolving this issue without resorting to suppressing the error.
For example, in the first filter within the computed methods:
// Get the total number of Paid Media leads
const totalPaid = this.leadData.filter(
lead => lead.medium == "paid_media"
).length;
Although medium is a property of leadData and can be successfully logged to the console, the property does not exist on type error persists.