I've created a Vue component that requires a function pointer to execute a delete action.
<template>
<q-card class="my-card" >
<q-img :src="media.normal || media.original">
<div class="absolute-bottom text-center">
{{ media.title || 'No Title'}}
</div>
</q-img>
<q-card-section>
<div class="text-h6">{{ media.title}}</div>
</q-card-section>
<q-card-section class="q-pt-none">
<q-btn @click="actionDelete(media.uuid)">Delete</q-btn>
</q-card-section>
</q-card>
</template>
<script setup lang="ts">
import { PropType, ref } from 'vue';
import { MediaItem } from 'src/data/mediaItem';
const props = defineProps({
media: {
type: Object as PropType<MediaItem>,
required: true
},
actionDelete: {
type: Function,
required: true
}
});
</script>
After referring to documentation and tutorials, I'm passing the function from the parent component to the child component like this:
<MediaItemComponent :media="media" :actionDelete="actionDelete(media.uuid)" />
However, VueJs (or TypeScript?) is showing this error message:
ERROR(vue-tsc) Type 'void' is not assignable to type 'Function'.
Can someone point out what I might be doing incorrectly?