vue 3 composition api props function Cannot invoke an object which is possibly 'undefined'

Question

I have a prop called sortSearch which is a function or callback from parent caller.

type SortSearchInterface = (
 currentSort: string,
 currentSortDir: string
) => void;

export default defineComponent({
  props: {
    //sortSearch: {
    //type: Function as PropType<(currentSort: string, currentSortDir: string)=> void>
    // type: Function as PropType<SortSearchInterface>|undefined
    // }
    sortSearch: Function as PropType<SortSearchInterface>,
  },

When attempting to call this function I get the following error Cannot invoke an object which is possibly 'undefined':

     // Cannot invoke an object which is possibly 'undefined'.Vetur(2722)
      //props.sortSearch(s, state.currentSortDir);

With my brief googling found very limited examples / documentation on this and any help appreciated.

Kuban · Accepted Answer · 2021-08-01 12:26:21Z

3

You need to mark this prop as required:

  props: {
    sortSearch: {
      type: Function as PropType<SortSearchInterface>,
      required: true
    },
  },

answered Aug 1, 2021 at 12:26

Kuban

1935 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

V H Over a year ago

Just to confirm that this has worked, thanks, interesting issue and fix, not quite sure how setting something to required = true translates to possibly undefined. It kind of starts to make questionable sense as in you have to question does it make sense

Michal Levý Over a year ago

It makes perfect sense. Vue props without required: true are optional - ie. the value can be undefined...

Collectives™ on Stack Overflow

vue 3 composition api props function Cannot invoke an object which is possibly 'undefined'

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related