I have utilized the provide/inject mechanism to pass data from a parent component to its grandchildren. However, in one of my components, I need to manipulate the data before rendering it in the template.
My current setup looks like this:
export default defineComponent({
name: 'MrComponent',
inject: ["mydata"],
computed: {
processedData() {
const mydata = this.mydata;
return mydata + 1; // Perform some data manipulation here
}
}
})
Unfortunately, I am encountering the following error:
[vue-cli-service] TS2339: Property 'mydata' does not exist on type 'CreateComponentPublicInstance<{ [x: string & `on${string}`]: ((...args: any[]) => any) | undefined; } | { [x: string & `on${string}`]: ((...args: never) => any) | undefined; }, { chartOptions: { responsive: boolean; maintainAspectRatio: boolean; cutout: string; borderWidth: number; }; }, ... 15 more ..., {}>'.
[vue-cli-service] Property 'mydata' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: { [x: string & `on${string}`]: ((...args: any[]) => any) | undefined; } | { [x: string & `on${string}`]: ((...args: never) => any) | undefined; }; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHan...'.
[vue-cli-service] 41 | computed: {
[vue-cli-service] 42 | chartData() {
[vue-cli-service] > 43 | const mydata = this.mydata;
[vue-cli-service] | ^^^^^^^^
[vue-cli-service] 44 | }
[vue-cli-service] 45 | }
[vue-cli-service] 46 | })
Although accessing mydata directly in the template works fine:
<template>
{{ mydata }}
</template>
I require additional processing steps before displaying the data. What would be the appropriate approach in this scenario?
Thank you.