Subscribe on changes!

Slot props undefined when wrapped around v-if (Unhandled error during execution of scheduler flush)

avatar
Sep 15th 2022

Vue version

3.2.29

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-effzhm?file=src%2FApp.vue&terminal=dev

Steps to reproduce

I have a generic component (a table) that defines a slot. This slot has a prop which is the data for "the current line to display" As we can see in the repro link, there is no problem with component TableComponent which is pretty simple and has no v-if around the action slot But with TableDataComponent which has a v-if around its action slot to see if the slot is defined before to display it, it seems that the first time the slot is displayed, it pass an undefined value has props and it throws some errors/warnings : [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Uncaught (in promise) TypeError: (destructured parameter) is undefined

What is expected?

if v-if is true, display the slot with defined props for the slot if v-if is false, don't display the slot

What is actually happening?

"Uncaught (in promise) TypeError: (destructured parameter) is undefined" is thrown

System Info

No response

Any additional comments?

Currently i have a workaround which is to not destructure slot props and wrap it with a v-if like that

      <template #action="slotProps">
        <template v-if="slotProps?.item">
          my html value
        </template>
      </template>

but I have to use it every where I want to define a slot for my tableComponent, it is redundant

avatar
Sep 17th 2022

the slot props are undefined because you call the slot's function without an argument on line 35.

I recommend to ask in the repo discussions or the Vue discord server for help on how to achieve your desired behavior.