Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JSX - Slots reactivity is not supported #9109

Closed
PurpleTape opened this issue Sep 1, 2023 · 4 comments · Fixed by #6484
Closed

JSX - Slots reactivity is not supported #9109

PurpleTape opened this issue Sep 1, 2023 · 4 comments · Fixed by #6484
Labels
has PR A pull request has already been submitted to solve the issue has workaround A workaround has been found to avoid the problem

Comments

@PurpleTape
Copy link

Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-t9skwh?file=src%2FApp.tsx

Steps to reproduce

Click "Toggle useSlot" button

What is expected?

Slot reactivity supported

What is actually happening?

Slots reactivity is not supported

System Info

No response

Any additional comments?

Sometimes there is a need to transfer a slot to the component, depending on the reactive value.
In the syntax of SFC templates, this can be done as follows:

<template>
  <Comp>
    <template #slotName v-if="someReactiveVariable">
       Slot value
    </template>
  </Comp>
</template>

But when I try to do something like this in JSX, it lose the ability to reactively control the transfer of the slot to the component:

const render = () => (
  <Comp>
    {{
      slotName: someReactiveVariable.value ? () => 'Slot value' : undefined
    }}
  </Comp>
)

What to do in such a situation?

@sxzz sxzz added the has workaround A workaround has been found to avoid the problem label Sep 1, 2023
@sxzz
Copy link
Member

sxzz commented Sep 1, 2023

Try

{{
--  text: useSlot.value ? () => 'slot value' : undefined,
++  text: () => (useSlot.value ? 'slot value' : undefined),
}}

Maybe relate to #6484

@PurpleTape
Copy link
Author

In this case, the slot will always be available in the slots object and because of this, the slots.text ? if true : if false check will be unavailable, which differs from the behavior in the <template> syntax. (This example is considered in the reproduction)

Indeed, we can perform the slot function and check if something is returned, but this entails additional checks and an increase in the amount of code

Most likely it really refers to the issue #6484

Is the proposed merge expected?

@baiwusanyu-c
Copy link
Member

sfc-playground
pr 6484

@baiwusanyu-c baiwusanyu-c added the has PR A pull request has already been submitted to solve the issue label Sep 1, 2023
@PurpleTape
Copy link
Author

@sxzz, @baiwusanyu-c, please take a look at #6484 for final approval 🥺🥺🥺

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
has PR A pull request has already been submitted to solve the issue has workaround A workaround has been found to avoid the problem
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants