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

Hydration mismatch when using Reusable Transition with v-if #5991

Closed
dvdmlln opened this issue May 24, 2022 · 0 comments · Fixed by #5995
Closed

Hydration mismatch when using Reusable Transition with v-if #5991

dvdmlln opened this issue May 24, 2022 · 0 comments · Fixed by #5995
Labels
feat: ssr 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.

Comments

@dvdmlln
Copy link

dvdmlln commented May 24, 2022

Vue version

3.2.36

Link to minimal reproduction

https://stackblitz.com/edit/github-96ft3e-z7szup

Steps to reproduce

  1. Create a reusable transition with a default slot
<template>
  <transition name="custom-transition">
    <slot />
  </transition>
</template>
  1. Use this transition with v-if inside the slot
<template>
  <div>
    <CustomTransition>
      <div v-if="showData">test</div>
    </CustomTransition>
</template>

What is expected?

No warning

What is actually happening?

Hydration children mismatch: server rendered element contains fewer child nodes than client vdom.

System Info

No response

Any additional comments?

v-show instead of v-if is working as expected

@yyx990803 yyx990803 added feat: ssr 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels May 24, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat: ssr 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants