How to fix "Type 'void' is not assignable to type 'Function' in VueJS?

Question

I have a Vue component that takes a function pointer to perform 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>

According to what I found in documentation and tutorials, I'm passing the function from my parent component to the child component:

<MediaItemComponent :media="media" :actionDelete="actionDelete(media.uuid)" />

However. VueJs (or TypeScript?) is complaining about that:

ERROR(vue-tsc)  Type 'void' is not assignable to type 'Function'.

What am I doing wrong?

Answer 1

Type error shows the mistake in code. :actionDelete="actionDelete(media.uuid)" results in actionDelete prop being the result of actionDelete call, which is undefined in this case, while the prop is expected to be a function. actionDelete isn't supposed to be called with the same argument twice.

It's rarely needed to pass a callback through a prop in Vue, this is handled with Vue events, which are easier to debug in devtools.

Should be in the parent:

<MediaItemComponent :media="media" @delete="actionDelete" />

In the child:

<q-btn @click="$emit('delete', media.uuid)">