Nuxt 3- [Vue警告]:组件内部< Transition>呈现无法设置动画的非元素根节点

llycmphe  于 2022-12-04  发布在  Vue.js
关注(0)|答案(1)|浏览(328)

我收到两个警告:

我验证了所有组件、页面和布局都有一个根元素。
布局:

默认值.vue

<template>
  <div>
    <slot />
  </div>
</template>

主要版本

<template>
  <div class="relative">
    <NavBarTop class="sticky top-0 z-40" />
    <!-- Content -->
    <div class="container mx-auto lg:mt-5">
      <div class="grid grid-cols-12 lg:px-8 p-3.5 mx-auto lg:gap-x-9">
        <!-- left column -->
        <div class="col-span-12 lg:block lg:col-span-3 place-items-start">
          <NavMain class="hidden lg:flex" />
          <slot name="left-column"></slot>
        </div>
        <!-- Center -->
        <div class="col-span-12 lg:col-span-6">
          <slot name="content"></slot>
        </div>
        <!-- right- -->
        <div class="order-first col-span-12 lg:col-span-3 lg:order-none">
          <slot name="right-column"></slot>
        </div>
      </div>
      <slot />
    </div>
  </div>
</template>

应用程序版本

<template>
  <div class="font-inter">
    <ToastNotification />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

直到<NuxtLayout> . <ToastNotification>在DOM中,但body标记中没有其他内容,应用程序才按预期“工作”。

软件包.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
     ...
    "nuxt": "3.0.0-rc.9",
     ...
  },
  "dependencies": {
   ...

    "nuxt3": "^3.0.1-rc.0-27821553.ab125bd",
   ...

  }
}
t40tm48m

t40tm48m1#

OP通过使用Nuxt的最新稳定3.0版本修复了该问题。

相关问题