This component uses a third-party module known as HelloWorld. This module has a prop called closeCallbacks, which is an array of callbacks that are triggered when the HelloWorld component is closed.
Unfortunately, the functionality of the third-party component cannot be modified.
To utilize the HelloWorld component in my template, I pass the closeCallbacks array from the data:
<template>
<HelloWorld :closeCallbacks="closeCallbacks" />
</template>
Next, I create an array of callbacks in my data section. Each callback includes an 'action' property required by the HelloWorld component, which is invoked upon the closure of HelloWorld:
<script lang="ts">
export default defineComponent({
data() {
return {
closeCallbacks: [
{
action: function () {
return this.handleCloseCallback();
},
},
],
};
},
methods: {
handleCloseCallback: function () {
//
},
},
});
</script>
When the 'action' callback is executed, I intend to call the handleCloseCallback method of my component (as demonstrated above).
However, I encounter an error in Vue 2.7:
Property 'handleCloseCallback' does not exist on type '{ name: string; action: (item: any) => void; }'.
When I convert handleCloseCallback to an arrow function:
handleCloseCallback: () => {
//
},
I am presented with a different error:
Property 'handleCloseCallback' does not exist on type 'CreateComponentPublicInstance<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, {}, {}, false, OptionTypesType<{}, {}, {}, {}, {}, {}>, ... 5 more ..., {}>'.
So, my inquiry is: how can I invoke a method from a callback defined in the data section?