1

我创建了一个自定义组件，它允许我应用淡入淡出的过渡，而无需始终编写<transition>组件：

    <transition
        mode="out-in"
        enter-active-class="transition-opacity ease-out"
        enter-from-class="opacity-0"
        enter-to-class="opacity-100"
        leave-active-class="transition-opacity ease-in"
        leave-from-class="opacity-100"
        leave-to-class="opacity-0"
      >
        <slot />
    </transition>

但是当我在某个地方使用它时：

    <FadingTransition>
          <div v-show="!isSearchFocused">
              ...
          </div>
    </FadingTransition>

我收到以下错误：

    [Vue warn]: Hydration node mismatch:
    - Client vnode: div 
    - Server rendered DOM: <!--[--> (start of fragment) 
      at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
      at <Transition mode="out-in" enter-active-class="transition-opacity ease-out duration-75" enter-from-class="opacity-0"  ... > 
      at <FadingTransition> 
      at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
      at <Transition mode="out-in" enter-active-class="ease-out duration-75" enter-from-class="transform -translate-y-1 opacity-0"  ... > 
      at <SearchBar> 
      at <Header> 
      at <App>

    Hydration completed but contains mismatches.

我该如何解决？

4

0 回答 0